Show popover only over hover for a second

I have popovers that I want to show only after hovering over the link for a second. But at the same time, when the user hovers over the popover itself, I want it to stay there so they can click the button in the popover. Currently, this part of the behavior works. But the issue is that if I hover over multiple of popover links right after each other (while trying to scroll to a specific link), it shows the popover for each link (that was scrolled/hovered over) for a split second even if I am not hovering over them any more. How do I get this to behave properly?

$(".comment").popover({      trigger: "manual",      html: true,      animation: false    })    .on("mouseenter", function() {      var _this = this;      var visible = true;    setTimeout(function() {      if (visible) {        $(_this).popover("show");      }       }, 1000);      $(".popover").on("mouseleave", function() {        visible = false;        $(_this).popover('hide');      });    }).on("mouseleave", function() {      var _this = this;      setTimeout(function() {        if (!$(".popover:hover").length) {          $(_this).popover("hide");        }      }, 1000);    });  

https://stackoverflow.com/questions/65894567/show-popover-only-over-hover-for-a-second January 26, 2021 at 09:08AM