启用鼠标悬停至 tooltips/popovers

Question

我无法打开 popovers/tooltips 中的链接。将鼠标悬停在它上面有效并显示弹出窗口。但是当我离开图像时，弹出窗口消失了（很明显）。我试过使用 mouseenter 和 mouseleave 但失败了。

$(document).ready(function() {
 $('[data-toggle="popover"]').popover({
  container: 'body',
  html: true,
   placement: 'bottom',
   trigger: 'hover',
   content: function() {
    return `
    <p class="description">Dummy text</p>
    <a href="/film">Link</a>`
   }
  });
  $('[data-toggle="popover"]').bind({
    mouseover: function () {
      clearInterval(timeoutId);
      $('[data-toggle="popover"]').show();
    },
    mouseleave: function () {
      timeoutId = setTimeout(function () {
        $('[data-toggle="popover"]').hide();
      }, 1000);
    }
  });
});

p.description{
 font-size: 0.7rem;
 color: black;
 margin-bottom: 0;
}
.popover {
 top: 40px !important;
}
div.popover-body{
 padding-bottom: 5px;
 padding-top: 5px;
}
h5{
 font-size: 1rem;
 color: white;
}
img.poster {
 opacity: 1.0;
 &:hover {
  opacity: 0.5;
  transition: all .2s ease-in-out; 
 }
}

<div class="col-4 text-center">
  <a href="/"><img class="img-fluid poster" data-toggle="popover" src="http://www.cutestpaw.com/wp-content/uploads/2011/11/friend.jpg">
   <h5 class="card-title mt-3">Test</h5>
  </a>
 </div>

知道出了什么问题吗？谢谢

编辑：我更新的代码： Updated code

Answer 1

您应该将 popover trigger 模式设置为 manual 并定义 mouseenter 和 mouseleave 事件以在 popuver 悬停时保持活动状态并应用延迟隐藏以防止突然消失

我提供了一个工作示例。

$('[data-toggle="popover"]').popover({ 
  trigger: "manual" , 
  html: true,
  placement: 'bottom',
  content: function() {
    return `
    <p class="description">Dummy text</p>
    <a href="/film">Link</a>`
   }
})
.on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
 }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
 }, 300);
});

p.description{
 font-size: 0.7rem;
 color: black;
 margin-bottom: 0;
}
.popover {
 top: 20px !important;
}
div.popover-body{
 padding-bottom: 5px;
 padding-top: 5px;
}
h5{
 font-size: 1rem;
 color: white;
}
img.poster {
 opacity: 1.0;
 &:hover {
  opacity: 0.5;
  transition: all .2s ease-in-out; 
 }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>


<div class="col-4 text-center">
<a href="/"><img class="img-fluid poster" data-toggle="popover" src="http://www.cutestpaw.com/wp-content/uploads/2011/11/friend.jpg">
</a>
</div>

Answer 2

我的问题的解决方案与我预期的不同。我忘记了我的 SPA 和模板文件，它们与弹出窗口一起产生了问题。它们并不容易兼容。

启用鼠标悬停至 tooltips/popovers

Enable to hover over to tooltips/popovers

html

javascript

jquery

tooltip

bootstrap-popover