bootstrap如何实现鼠标悬停显示提示信息,下面编程教程网小编给大家详细介绍一下具体代码!
html代码:
<button type="button" rel="drevil" data-content="具体时间:'+time+'"
data-container="body" data-toggle="popover" data-placement="bottom"></button>
js代码:
$(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>',
html: 'true', //needed to show html of course
//content : '<div id="popOverBox"></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如何实现鼠标悬停显示提示信息”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:bootstrap如何实现鼠标悬停显示提示信息


基础教程推荐
猜你喜欢
- vue每次进入页面内容都能定位到头部 2025-01-14
- 深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解 2024-02-10
- javascript-在Windows 8 Metro HTML5应用程序中保持图像质量的同时调整图像大小? 2023-10-25
- 常用jQuery选择器汇总 2024-04-08
- CSS3中的Transition过度与Animation动画属性使用要点 2024-04-03
- JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性 2024-04-04
- js如何判断用户是在PC端和还是移动端访问 2024-02-09
- 详解CSS开发过程中的20个快速提升技巧 2022-11-13
- SmartPlant3D VUE解析 2023-10-08
- JS中不应该使用箭头函数的四种情况详解 2022-08-30