Enable to hover over to tooltips/popovers

Question

I have an issue with having to open links in popovers/tooltips. The hover over it works and the popover is shown. But when I leave the image the popover disappear (obviously). I've tried using mouseenter and mouseleave but failed.

$(document).ready(function() {
 $('[data-toggle="popover"]').popover({
  container: 'body',
  html: true,
   placement: 'bottom',
   trigger: 'hover',
   content: function() {
    return `
    <p class="description">Dummy text</p>
    <a href="/film">Link</a>`
   }
  });
  $('[data-toggle="popover"]').bind({
    mouseover: function () {
      clearInterval(timeoutId);
      $('[data-toggle="popover"]').show();
    },
    mouseleave: function () {
      timeoutId = setTimeout(function () {
        $('[data-toggle="popover"]').hide();
      }, 1000);
    }
  });
});

p.description{
 font-size: 0.7rem;
 color: black;
 margin-bottom: 0;
}
.popover {
 top: 40px !important;
}
div.popover-body{
 padding-bottom: 5px;
 padding-top: 5px;
}
h5{
 font-size: 1rem;
 color: white;
}
img.poster {
 opacity: 1.0;
 &:hover {
  opacity: 0.5;
  transition: all .2s ease-in-out; 
 }
}

<div class="col-4 text-center">
  <a href="/"><img class="img-fluid poster" data-toggle="popover" src="http://www.cutestpaw.com/wp-content/uploads/2011/11/friend.jpg">
   <h5 class="card-title mt-3">Test</h5>
  </a>
 </div>

Any idea what's wrong? Thanks

EDIT: My updated code: Updated code

lucky · Accepted Answer · 2018-01-20T17:35:01.173

You should set the popover trigger mode as manual and define mouseenter and mouseleave events to keep popuver alive while it hovered and apply delay for hiding to prevent disappear suddenly.

I provided a working example.

$('[data-toggle="popover"]').popover({ 
  trigger: "manual" , 
  html: true,
  placement: 'bottom',
  content: function() {
    return `
    <p class="description">Dummy text</p>
    <a href="/film">Link</a>`
   }
})
.on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
 }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
 }, 300);
});

p.description{
 font-size: 0.7rem;
 color: black;
 margin-bottom: 0;
}
.popover {
 top: 20px !important;
}
div.popover-body{
 padding-bottom: 5px;
 padding-top: 5px;
}
h5{
 font-size: 1rem;
 color: white;
}
img.poster {
 opacity: 1.0;
 &:hover {
  opacity: 0.5;
  transition: all .2s ease-in-out; 
 }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>


<div class="col-4 text-center">
<a href="/"><img class="img-fluid poster" data-toggle="popover" src="http://www.cutestpaw.com/wp-content/uploads/2011/11/friend.jpg">
</a>
</div>

Not bad, but the popover appears on the image, not beneath as stated in the popover object. And for some reason it's not working at all when copying it over to sublime. — Janssonn, Jan 20 '18 at 17:45
The code snippet which I shared is working as expected. The hover appears bottom of the image. I couldn't know what problem occurs in your code base. — lucky, Jan 20 '18 at 17:47
Oh, my bad. Now it works splendidly in here. But still the problem occurs on my sublime. I'll edit on my original post a printscreen of how my code looks at the moment. — Janssonn, Jan 20 '18 at 18:04
I solved it. You did write right code but..! It didn't work beacuse I use classes and OOP together with seperate template files along with single page application. So the popover didn't register because it didn't "exsist" on the DOM. I didn't think of it at first. — Janssonn, Jan 20 '18 at 19:38

score 0 · Answer 2 · answered Jan 20 '18 at 19:42

0

The solution to MY problem was different than what I expected. I forgot about my SPA and template files which created a problem together with popover. They are not really easily compatible.

answered Jan 20 '18 at 19:42

Janssonn

87
1
8

Enable to hover over to tooltips/popovers

2 Answers2