javascript - Enable to hover over to tooltipspopovers - Stack Overflow

admin管理员组

文章数量:1432213

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

Share Improve this question Follow edited Jan 20, 2018 at 18:07 Janssonn asked Jan 20, 2018 at 16:49 JanssonnJanssonn 8722 silver badges88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

本文标签： javascriptEnable to hover over to tooltipspopoversStack Overflow