代码之家 › 专栏 › 技术社区 › Janssonn

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

bootstrap-popover tooltip html jquery javascript

Janssonn · 技术社区 · 7 年前

我有一个问题,必须打开弹出窗口/工具提示中的链接。将鼠标悬停在其上即可工作,并显示弹出窗口。但当我离开图像时,popover消失了(很明显)。我尝试过使用mouseenter和mouseleave,但失败了。

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

知道怎么了吗? 谢谢

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

2 回复 | 直到 7 年前

Emre Kabaoglu 7 年前

你应该设置popover trigger 模式组件 manual 并定义 mouseenter 和 mouseleave 事件使popuver在悬停时保持活动状态,并应用隐藏延迟以防止突然消失。

我提供了一个工作示例。

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

Janssonn 7 年前

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