这篇文章主要介绍bootstrap设置鼠标悬停提示的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
1、
<button type="button" rel="drevil" data-content="报名截止时间:'+time+'" data-container="body" data-toggle="popover"
data-placement="bottom"></button>
2、
$(function () { $("[data-toggle='popover']").popover(); });
$("[rel=drevil]").popover({
trigger:'manual',
//placement : 'bottom', //placement of the popover. also can use top, bottom,
left or right
//天title : '<div style="text-align:center; color:red; text-decoration:underline;
font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover.
add some basic css
html: 'true', //needed to show html of course
//content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content
/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>', //this is the
content of the html box. add the image here or anything you want really.
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")
}
}, 300);
});
以上是bootstrap设置鼠标悬停提示的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。