当鼠标出现在文字上时显示内容
依赖的js包括:jquery.js、bootstrap.min.js;
样式库:bootstrap.min.css
<body>
<p style="padding-top: 50px"><a href="#" rel="drevil" >信息</a></p>
</body>
$(function(){
$("[rel=drevil]").popover({
trigger:'manual',
placement : 'right',
title : '<div style="font-size:14px;width: auto;max-width: 200px;">信息</div>',
html: 'true',
content: function() {
return $(this).attr('data-contentStr');
},
animation: false
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(this).siblings(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
});