启用悬停工具提示/弹出窗口功能

Question

我遇到了一个问题，需要在弹出框/工具提示中打开链接。当我将鼠标悬停在图片上时，弹出框会显示出来。但是当我离开图片时，弹出框就消失了（显然）。我尝试使用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>

有什么问题不对吗？ 谢谢

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

- Janssonn

Answer 1

你应该将弹出框的触发模式设置为手动manual，并定义mouseenter和mouseleave事件来保持弹出框在鼠标悬停时保持显示，并应用延迟隐藏以防止突然消失。

我提供了一个可行的示例。

$('[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>

- lucky

---

还不错，但是弹出框出现在图片上方，而不是在弹出框对象中所述的下方。并且由于某种原因，在将其复制到Sublime时根本无法工作。 - Janssonn

我分享的代码片段按预期运作。悬停出现在图像底部。我不知道你的代码出了什么问题。 - lucky

哦，我的错。现在它在这里运行得非常出色。但是在我的Sublime上仍然存在问题。我将在原始帖子上编辑一个截图，展示目前我的代码的样子。 - Janssonn

我解决了。你写的代码是正确的，但是...！它没有起作用，因为我同时使用类和面向对象编程（OOP），并且将单独的模板文件与单页应用程序一起使用。因此，弹出窗口未注册，因为它在DOM上不存在。一开始我没有想到这个问题。 - Janssonn

Answer 2

我的问题的解决方案与我预期的不同。我忘记了我的SPA和模板文件，它们与弹出框一起创建了问题。它们并不是真正容易兼容的。

- Janssonn