twitter-bootstrap

Keeping the focus with bootstrap's popover


I've been looking at using Bootstrap's Popover widget and while I like it's look one thing that I'd love to see is the ability to place hyperlinks or buttons within the content of the popover's body. Actually place them there but the problem is allowing a user to click on them.

More specifically the problem is -- with default options anyways -- as soon as you leave the link and move toward the popover it disappears. Is there any way to address this other than just dialling up the delay { hide } setting? The "right" solution in my mind would be to keep a tight "hide setting" (aka, delay: {hide:100}) but allow for cursor movement while over the popover to not start the timer.

Hoping I'm missing an easy trick here. All and any help is welcome.


Solution

  • The code below will show the popover when the mouse goes over and it will keep it visable when the mouse moves away.

    $("span[rel=popover]").popover({ trigger: 'manual' }).hover(function(e){ 
    $(this).popover('show');
    e.preventDefault(); 
    });
    

    To close it call

     $("span[rel=popover]").popover('hide');
    

    HTH