Question

我有一个问题，必须在弹出窗口/工具提示中打开链接。将鼠标悬停在它上方并显示弹出窗口。但是当我离开图像时，popover消失了（显然）。我尝试过使用mouseenter和mouseleave但是失败了。

＆＃13;

$(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);
    }
  });
});

＆＃13;

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; 
	}
}

＆＃13;

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

＆＃13;

知道什么是错的吗？感谢

编辑：我的更新代码： Updated code

Answer 1

您应该将popover trigger模式设置为manual并定义mouseenter和mouseleave个事件，以便在游戏停留时保持游泳者活着并应用隐藏延迟以防止突然消失

我提供了一个工作示例。

$('[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>

Answer 2

我的问题的解决方案与我的预期不同。我忘记了我的SPA和模板文件，它们与popover一起产生了问题。它们并不是很容易兼容。

允许将鼠标悬停在工具提示/弹出窗口上

2 个答案: