Bootstrap Popover + Angular:将鼠标悬停在popover框上时，保持打开popover
Bootstrap Popover + Angular:将鼠标悬停在popover框上时，保持打开popover
提问于 2016-02-05 02:32:59
我有一个让我发疯好几天的问题。我需要显示一个带有链接的弹出式鼠标悬停按钮。当鼠标悬停在按钮或弹出框上时，弹出框必须打开。
我需要的是我在Plunker上找到的这个例子的一个角度版本：
// Code goes here
$(".pop").popover({ trigger: "manual" , html: true, animation:false})
.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);
});/* Styles go here */
.box {
display:block;
width:200px;
height:100px;
background-color:#DDD;
}
#pop {
padding:0px 0px;
}
#example {
position:relative;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2 class='text-primary'>Another Great "KISS" Bootstrap Popover example!</h2>
<p class='text-muted'>KISS = Keep It Simple S....</p>
<p class='text-primary'>Goal:</p>
<ul>
<li>Open popover on hover event for the popover button</li>
<li>Keep popover open when hovering over the popover box</li>
<li>Close popover on mouseleave for either the popover button, or the popover box.</li>
</ul>
<button type="button" class="btn btn-danger pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>"
data-original-title="" title="">
HOVER OVER ME
</button>
<br><br>
<button type="button" class="btn btn-info pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>"
data-original-title="" title="">
HOVER OVER ME... Again!
</button><br><br>
<button type="button" class="btn btn-success pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>"
data-original-title="" title="">
Okay one more time... !
</button>
<br><br>
<p class='text-info'>Hope that helps you... Drove me crazy for a while</p>
<script src="script.js"></script>
</body>
</html>
不幸的是，我是Angular的新手，不知道如何将这个jquery示例转换成Angular。
回答 1
Stack Overflow用户
发布于 2016-02-05 02:44:02
angular UI有UI Bootstrap，它在Angular中提供了很多常用的JQuery和Bootstrap插件。
https://angular-ui.github.io/bootstrap/#/popover
有UI Bootstrap Popover，您可以配置为响应mouseenter和mouseleave事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35208884
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号