javascript - Bootstrap popover: hide when cursor moves outside of the window -

javascript - Bootstrap popover: hide when cursor moves outside of the window -

i want display popover contains several buttons when user hovers on text link

the problem have default bootstrap popover i'm using dismissed when cursor link triggered (e.g. when user moves select 1 of buttons)

this jsfiddle illustration of tried do.. principle is: show popover when link (#example) hovered, hide popover when popover (.popover) unhovered.

but doesn't work, although i'm sure bs popover encapsulated in .popover class (i check ff dev debug tool).

funny thing: works div! if replace

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

by this

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

the popover indeed hidden when no longer hovering bluish square.

why doesn't work .popover?

you need hide popover when mouse leaves .popover-content not .popover. , .popover-content not exist @ origin need bind event document

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

http://jsfiddle.net/o4o9rrsq/2/

javascript jquery twitter-bootstrap