1

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?

davidcondrey
  • 34,416
  • 17
  • 114
  • 136
Blacksad
  • 1,230
  • 1
  • 14
  • 23
  • possible duplicate of [How can I keep bootstrap popover alive while the popover is being hovered?](http://stackoverflow.com/questions/15989591/how-can-i-keep-bootstrap-popover-alive-while-the-popover-is-being-hovered) – rails_id Oct 06 '14 at 06:51

1 Answers1

6

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.net/o4o9rrsq/2/

Dmitry
  • 6,716
  • 14
  • 37
  • 39
  • 1
    Thanks. Answer accepted because it answer my particular question. But for later reference, as anonymousxxx said there is a better solution for my root problem described here: http://stackoverflow.com/a/19684440/2955738 (Working code: http://plnkr.co/edit/x2VMhh) – Blacksad Oct 06 '14 at 07:15