CODEWITHSUNDEEP
twitter-bootstrap-3bootstrap-popover
user1941235
user1941235

Reputation: 113

Show popover if hovering an element longer

Using Bootstrap popover to show a content of a hidden div as popover content How would one implement not showing the popover until the main element is not hovered for at least one second?

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

I have this page with a table containing a lot of icons. Each icon has some data that is kind of big and so was moved to scrollable popovers. I want the popowers to be shown, but nost so much that you move the mouse across the page and they all light up. That is why I need the delay before they appear. The delay after mouse leave is so the popovers don't close when i want to enter them and scroll their content. I change my code to open them on click until i get another solution. Fiddle: https://jsfiddle.net/mandor/v5e73fzu/14/

Upvotes: 0

Views: 434

Answers (1)

skwidbreth
skwidbreth

Reputation: 8424

Use a flag variable and check it/set it with some 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);
});

Upvotes: 2

Related Questions