BootStrap利用popover实现鼠标经过显示并保持显示框

半兽人 发表于: 2021-03-25   最后更新时间: 2021-03-31 14:42:33  
{{totalSubscript}} 订阅,314 游览

在真实场景下,经常需要鼠标经过时展示,显示一些详细说明,但是,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下:

html实现:

<a href="#" rel="drevil">
    移动到我这
</a>

javascript实现:

$(function(){
    $("[rel=drevil]").popover({
        trigger:'manual',
        placement : 'bottom',
        title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;">www.orchome.com</div>',
        html: 'true',
        content : '<div id="popOverBox"><img src="/images/user/noHeadPortraitV2.png" width="251" height="201" /></div>',
        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);
      });
});

在线运行



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容


上一条: bootstrap 3 nav-tab用法
下一条: 已经是最后了!

提问