How can I hold Twitter Bootstrap Popover open until my mouse moves into it?

Question

I have a link that uses the Twitter Bootstrap Popover version 1.3.0 to show some information. This information includes a link, but every-time I move my mouse from the link to the popover, the popover just disappears.

How can I hold popover open long enough to enable the mouse to move into it? Then when the mouse moves out of the link and popover, hide it?

Or is there some other plugin that can do this?

Answer 1

With bootstrap (tested with version 2) I figured out the following code:

$("a[rel=popover]")
            .popover({
                offset: 10,
                trigger: 'manual',
                animate: false,
                html: true,
                placement: 'left',
                template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

            }).click(function(e) {
                e.preventDefault() ;
            }).mouseenter(function(e) {
                $(this).popover('show');
            });

The main point is to override template with mouseleave() enabler. I hope this helps.