如果将元素悬停更长时间，则显示弹出框

Question

使用 Bootstrap 弹出框将隐藏 div 的内容显示为弹出框内容 在主元素没有悬停至少一秒钟之前，如何实现不显示弹出框？

$(function () {
$("[data-toggle=popover]").popover({
    trigger: "manual",
    html: true,
    content: function () {
        var content = $(this).attr("data-popover-content");
        return $(content).children(".popover-body").html();
    },
    title: function () {
        var title = $(this).attr("data-popover-content");
        return $(title).children(".popover-heading").html();
    }
})
    .on("mouseenter", function () {
        var _this = this;

        $(_this).popover("show");

        $(".popover").on("mouseleave", function () {
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide");
                }
            }, 300);
        });
    })
    .on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 300);
    });});

我有一个包含很多图标的表格的页面。每个图标都有一些很大的数据，因此被移动到可滚动的弹出窗口中。我希望显示 popowers，但不要在页面上移动鼠标，它们都会亮起。这就是为什么我需要在它们出现之前延迟。鼠标离开后的延迟是这样的，当我想输入它们并滚动它们的内容时，它们不会关闭。 我更改我的代码以单击打开它们，直到我得到另一个解决方案。 小提琴：https://jsfiddle.net/mandor/v5e73fzu/14/

Answer 1

使用标志变量并使用setTimeouts...检查/设置它...

var timerReady = false
var showPopup;

$("[data-toggle=popover]").popover({
  trigger: "manual",
  html: true,
  content: function() {
    var content = $(this).attr("data-popover-content");
    return $(content).children(".popover-body").html();
  },
  title: function() {
    var title = $(this).attr("data-popover-content");
    return $(title).children(".popover-heading").html();
  }
})
.on("mouseenter", function() {
  var _this = this;

  timerReady = true

  showPopup = setTimeout(function(){
    if(timerReady){
      $(_this).popover("show");
    }
  }, 1000)
})
.on("mouseleave", function() {
  clearTimeout(showPopup)
  timerReady = false
  var _this = this;
  setTimeout(function() {
    if (!$(".popover:hover").length) {
      $(_this).popover("hide");
    }
  }, 300);
});