How to stop bootstrap popover form from disappearing

Question

following Contain form within a bootstrap popover?, I have managed to place a form within a popover which I'm using in my bootstrap navbar. The popup works fine when I hover over the link, but when I try to move the mouse to get to the popover form, it disappears ! How can I fix this?

Navbar Item:

<li <? if($active == "change_password") echo "class=\"active\""?>>
<?php echo '<a href="#" id="popover">the popover link</a>' ?>
</li>
<li class="divider-vertical"></li>

Here's the js:

$('li:contains("the popover link")').popover({ 
    html : true,
    title: function() {
        return $("#popover-head").html();
    },
    content: function() {
        return $("#popover-content").html();
    }
});

Have you considered using a modal instead? That seems more suited to what you're attempting to do http://getbootstrap.com/2.3.2/javascript.html#modals — cfs, Aug 08 '13 at 20:31
do u have some event hover, mouseover, mousenter... on the element? — Ricardo Binns, Aug 08 '13 at 20:34
Thats a good idea - I'll check into the modal. Thanks - Bill — user1592380, Aug 09 '13 at 14:20

score 2 · Answer 1 · answered Dec 17 '13 at 17:33

You probably have this figured out or have a work around solution, but I wanted to share my solution since I needed the same thing and a modal wasn't optimal for the design. This works for both Bootstrap 2.x and 3.x and will maintain the toggling behavior with the click event.

$('li:contains("the popover link")').popover({
    html : true,
    title: function() {
        return $("#popover-head").html();
    },
    content: function() {
        return $("#popover-content").html();
    }
}).mouseenter(function () {
    if (!$(this).parent().find('.popover').length) {
        $(this).popover('show');
    }
});

Demo

How to stop bootstrap popover form from disappearing

1 Answers1