Question

使用Bootstrap popover将隐藏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

使用标志变量并检查/设置一些setTimeout s ...

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);
});

如果将元素悬停更长

1 个答案: