Skip to content

Instantly share code, notes, and snippets.

@ains
Last active December 17, 2015 22:39
Show Gist options
  • Save ains/5683650 to your computer and use it in GitHub Desktop.
Save ains/5683650 to your computer and use it in GitHub Desktop.
Holding a bootstrap popover open until the mouse enters the popover element. Adapted from StackOverflow answer to "How can I hold Twitter Bootstrap Popover open until my mouse moves into it?" (http://stackoverflow.com/a/9400740)
$(function () {
$("[rel=popover]")
.popover({
delay: 500,
offset: 10,
trigger: 'manual',
animate: false,
html: true,
template: '<div class="popover" onmouseover="clearTimeout($(this).data(\'hideTimeout\'));$(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');
}).mouseleave(function (e) {
var elem = $(this);
//Give the user 150ms to move mouse from triggering element to popover tip
var hideTimeout = setTimeout(function () {
elem.popover('hide');
}, 150);
$($(this).data('popover').$tip).data('hideTimeout', hideTimeout);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment