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如何实现鼠标悬停显示提示信息
				
        
 
            
        
             猜你喜欢
        
	     - GSAP文档官网介绍 2025-01-18
 - jQuery中过滤器的基本用法示例 2024-03-11
 - CSS属性探秘系列(一):word-break与word-wrap 2024-03-11
 - layer.open+iframe页窗口=在父页面调用iframe子页面函数 2022-10-05
 - js实现经典扫雷游戏 2024-02-06
 - 老生常谈position定位——让人又爱又恨的属性 2024-01-02
 - vue每次进入页面内容都能定位到头部 2025-01-12
 - react axios 跨域访问一个或多个域名问题 2023-02-23
 - 解决微信内置浏览器返回上一页强制刷新问题方法 2023-12-25
 - Varlet UI移动端UI组件库中文文档官网介绍 2025-01-18
 
						
						
						
						
						
				
				
				
				