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

Answer 1

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>