鼠标出现在文字上时显示内容

最新推荐文章于 2023-06-14 14:07:52 发布

LeavesMi

最新推荐文章于 2023-06-14 14:07:52 发布

阅读量868

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/LeavesMi/article/details/51863099

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

当鼠标出现在文字上时显示内容

依赖的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);
      });
    });

LeavesMi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标出现在文字上时显示内容

当鼠标出现在文字上时显示内容依赖的js包括：jquery.js、bootstrap.min.js;样式库：bootstrap.min.css信息 $(function(){ $("[rel=drevil]").popover({ trigger:'manual', placement : 'right',
复制链接

扫一扫