0

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/

user1941235
  • 113
  • 1
  • 10

1 Answers1

2

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);
});
skwidbreth
  • 7,888
  • 11
  • 58
  • 105
  • Can you take a look at this fiddle I made to test this? I'm not sure how to fix this delay. I'm a JS noob. https://jsfiddle.net/mandor/v5e73fzu/12/ – user1941235 Apr 29 '17 at 07:26
  • Yes, this was a little trickier than I initially thought. I've edited my answer - similar concept with the flag variable, just had to change the scope a bit. Please accept it if you find that this gets the job done. – skwidbreth Apr 29 '17 at 17:03
  • This works! Thank you kind sir. I have updated the fiddle in case someone else finds this helpful: https://jsfiddle.net/mandor/v5e73fzu/ – user1941235 Apr 29 '17 at 20:04
  • Spoke a bit too soon. You see when you have multiple popovered items and you move over the first one to get to the other? it shows both popovers although you hovered only the second one for more than one second :-/ – user1941235 Apr 29 '17 at 20:13
  • Oh yes, I see what you're saying. Let me think about this a bit more - I won't abandon you, but I'd encourage you to see if you can expand on the solution that I provided and see if you can fix that other condition as well. – skwidbreth Apr 29 '17 at 20:29
  • I updated my code to open popovers on click and close them on mouse leave. I will also add some info to the original question detailing what I need. – user1941235 Apr 30 '17 at 05:34
  • I think I got this closer to what you're looking for - note the use of `showPopup` and `clearTimeout`. – skwidbreth Apr 30 '17 at 10:33
  • So I took your code and updated the fiddle here with just adding the part that should hide on mouseleave the popover itself https://jsfiddle.net/mandor/v5e73fzu/16/ It works but it's kind of odd. If I hover the button for 1 second, popover apears and i move my mouse to popover and then move it out of popover and the popover will not close. But only the first time for each button after loading. After the first time, it works great every time. – user1941235 Apr 30 '17 at 19:25
  • Yes, I had noticed that - that's why I said it was closer, didn't want to give the impression it was a complete fix. This is proving to be a bit tricky to get all of the conditions working correctly. I'll play with it some more, now you've got me hooked! – skwidbreth May 01 '17 at 13:15