jquery - Bootstrap popover to appear on hover and remain for a second -

i popover appear on hover, remain if user interacting (it contains links) if not, should disappear after 500ms.

javascript

$(document).ready(function(){     $('[data-toggle="tooltip"]').popover({ title: 'look! bird!', html:true, delay: { show: 100, hide: 1000 } }); }); 

php

<button type="button" class="badge btn btn-default" data-trigger="click" data-toggle="tooltip" data-placement="top" data-html=true data-content="@foreach($tag->tracks $track) <a href='/tracks/{{ $track->mdbid }}'>{{ $track->title }}</a> @endforeach">{{ $tag->tracks->count() }}</button> 

ignore funny code inside brackets (it laravel blade syntax)

jsfiddle

i have created jsfiddle although doesn't work (it on machine). have got delay working. however, if mouse within popover, still disappears. how can prevent , make disappear when mouse outside popover?

this not work, not know original author credit goes them

this jsfiddle solved it.

html

<p id='container'> <button class='btn btn-primary btn-large' data-popover="true" data-html=true data-content="<a href='http://www.wojt.eu' target='blank' >click me, i'll try not disappear</a>">hover here</button> </p> 

javascript

var originalleave = $.fn.popover.constructor.prototype.leave; $.fn.popover.constructor.prototype.leave = function(obj){   var self = obj instanceof this.constructor ?     obj : $(obj.currenttarget)[this.type](this.getdelegateoptions()).data('bs.' + this.type)   var container, timeout;    originalleave.call(this, obj);    if(obj.currenttarget) {     container = $(obj.currenttarget).siblings('.popover')     timeout = self.timeout;     container.one('mouseenter', function(){       //we entered actual popover – call off dogs       cleartimeout(timeout);       //let's monitor popover content instead       container.one('mouseleave', function(){         $.fn.popover.constructor.prototype.leave.call(self, self);       });     })   } };   $('body').popover({ selector: '[data-popover]', trigger: 'click hover', placement: 'auto', delay: {show: 50, hide: 400}}); 

css

#container {     text-align: center;     margin: 8em 3em; }