I want to display a popover which contains several buttons when user hovers over a text link

The problem I have is the default Bootstrap popover I'm currently using is dismissed when the cursor from the link which triggered it (e.g. when the user moves to select one of the buttons)

This jsFiddle is an example of what I tried to do.. The principle is: show popover when the link (#example) is hovered, hide popover when the popover (.popover) is unhovered.

But this doesn't work, although I'm sure that the BS popover is encapsulated in a .popover class (I check with FF dev debug tool).

Funny thing: it works with another div! If I replace

$('.popover').mouseleave(function(){
    $('#example').popover('hide');
});

By this

$('.square').mouseleave(function(){
    $('#example').popover('hide');
});

The popover is indeed hidden when no longer hovering the blue square.

Why doesn't work with .popover?

I want to display a popover which contains several buttons when user hovers over a text link

The problem I have is the default Bootstrap popover I'm currently using is dismissed when the cursor from the link which triggered it (e.g. when the user moves to select one of the buttons)

This jsFiddle is an example of what I tried to do.. The principle is: show popover when the link (#example) is hovered, hide popover when the popover (.popover) is unhovered.

But this doesn't work, although I'm sure that the BS popover is encapsulated in a .popover class (I check with FF dev debug tool).

Funny thing: it works with another div! If I replace

$('.popover').mouseleave(function(){
    $('#example').popover('hide');
});

By this

$('.square').mouseleave(function(){
    $('#example').popover('hide');
});

The popover is indeed hidden when no longer hovering the blue square.

Why doesn't work with .popover?

• javascript
• jquery
• twitter-bootstrap

• possible duplicate of How can I keep bootstrap popover alive while the popover is being hovered? – rails_id Commented Oct 6, 2014 at 6:51

1 Answer 1

You need to hide popover when the mouse leaves the .popover-content not .popover. And .popover-content does not exist at the beginning so you need to bind the event to the document

    $(document).on('mouseleave','.popover-content',function(){
        $('#example').popover('hide');
    });

http://jsfiddle/o4o9rrsq/2/