Make Bootstrap's tooltips hoverable

Bootstrap's tooltips closes once you try to hover it, which sucks in case you want to put a link on it.

See fiddle:

http://jsfiddle.net/YTb62/16/

Code:

<span class="x" data-toggle="tooltip" data-html="true" data-title="It works?" data-content="If you can <a href='http://youtu.be/IBH4g_ua5es'>click me</a>, it works.">Hover me</span>

<script>
    $(function() {
         $('.x').popover({
                placement: 'right',
                trigger: 'hover'
             });
    });
</script>

PS: Any way to use bootstrap tooltips along with HoverIntent?

Solution

I cannot see a way to do it because Bootstrap's hover code removes the tooltip element from the DOM the instant you move off the <span> tag, so there is nothing for the user to click on.

Have you thought of creating your own tooltips? Then you could build-in that feature, possibly by building-in a delay before removing the tooltip from the DOM. To build-in the delay, perhaps check out the setTimeout() method.

How to create a tooltip with jquery without a plugin?

http://www.designchemical.com/blog/index.php/jquery/jquery-tooltips-create-your-own-tooltip-plugin/

http://www.queness.com/post/92/create-a-simple-cssjavascript-tooltip-with-jquery

http://net.tutsplus.com/articles/news/you-still-cant-create-a-jquery-plugin/

http://www.davidjrush.com/blog/2011/12/simple-jquery-tooltip/