javascript - 添加悬停延迟

Question

我试过 setTimeout 但似乎没有使用引导弹出窗口。我试过包装“$(this).popover("show");” 如果某个类在元素上但似乎不起作用，则会触发超时。

弹出框是手动的，因为这使我可以悬停产品以及弹出框本身而不会消失。

目标：能够在产品上悬停 500 毫秒而不显示弹出框。

任何帮助表示赞赏。

$(".pop").each(function () {
      var $pElem = $(this);
      $pElem.popover(
          {
              html: true,
              trigger: "manual",
              title: getPopoverTitle($pElem.attr("id")),
              content: getPopoverContent($pElem.attr("id")),
              container: 'body',
              animation: false,
              placement: function (context, source) {
                  var position = $(source).position();
                  if (position.left > 615) {
                      return "left";
                  }
                  if (position.left < 615) {
                      return "right";
                  }
              }
          }
      );
  }).on("mouseenter", function () {
      var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
        $(".popover").on("click", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");

            }
        }, 100);
    });

    function getPopoverTitle(target) {
        return $("#" + target + "_content > h3.popover-title").html();
    };

    function getPopoverContent(target) {
        return $("#" + target + "_content > div.popover-content").html();
    };

HTML

   <div class="product-div pop mll mbl pull-left "  id="@item.Id" >@Html.Partial("_ProductBookBox", item)</div>
 /**PRODUCT PARTIAL***/<div class="container-product">
            <div class="product-small" style='background-image: url(@Model.ImageURL);'>
                <div class="product-overlay">
                    <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" class="product-button info"></a>

                </div>
                <div class="product-content">
                    <div class="product-add-content">
                        <div class="product-add-content-inner">
                            <div class="section">
                                <a href="#" class="btn btn-primary buy expand">Buy now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>