Make Bootstrap Popover Clickable / SetTimeout Use

Question

I am trying to make bootstrap 'popover' available so that it stays open when I hover over it.

I managed to get this working with this script http://jsfiddle.net/CtuRx/5/ .

But when I run it through jslint, it complains that the settimeout parameter is used before it is defined.

I wonder if someone can provide / explain the best solution for creating and using one function - to determine and cause a delay in the installation of the source class .btn and .popover on both elements of the mouse.

Thanks!

Answer 1

Here is an alternative solution .

I wrapped your buttons in a div.

When the mouse enters the div shell, it shows a popover and expands to provide a bridge for the mouse to enter a popover without launching the mouse. We also place the mouse over the popover so that the div wrapper reverts to its default width when we leave the popover.

links.mouseenter(function (event) { var link = $(this); link.popover('show').width(180); $('.popover').mouseleave(function () { link.popover('hide').width(defaultWidth); }); }); 

When the mouse leaves the button and enters the bridge to the popover, I noticed that the mouseleave event is fired on the wrapper due to a bubbling event. The following code fixes this by ignoring the mouse event if we do not exit the shell into the body.

 links.mouseleave(function (event) { if (event.toElement === document.body) { $(this).popover('hide').width(defaultWidth); } }); 

Try adding a border to the wrapper delimiters to see the code in action. Also. you should consider styling CSS to make it more readable.