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=".jpg">
			<h5 class="card-title mt-3">Test</h5>
		</a>
	</div>

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./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

• javascript
• jquery
• html
• tooltip
• bootstrap-popover

2 Answers 2

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./bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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./wp-content/uploads/2011/11/friend.jpg">
</a>
</div>

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 patible.