twitterbootstrapのtooltipをmousehoverで実装(twitterbootstrap)

<!----html側---->
<a href="#" onclick="$(this).popover('toggle'); return false;" class="detail" rel="popover"
 title="タイトル"  data-content="本文"> 詳しく見る</a>

<!----JS側---->

script type="text/javascript">
	$('.detail').popover({
	offset: 10,
	trigger: 'manual',
	html: true,
	placement: 'top',
	template: '<div class="popover" onmouseover="clearTimeout(timeoutObj);$(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>'
			}).mouseenter(function(e) {
						$(this).popover('show');
			}).mouseleave(function(e) {
			var ref = $(this);
			timeoutObj = setTimeout(function(){
			ref.popover('hide');
			}, 50);
			});

			  
		</script>