0
我有一个问题让我疯狂了好几天。我需要在链接按钮时显示带有链接的弹出窗口。当鼠标悬停按钮或弹出框时，弹出窗口必须打开。Bootstrap Popover + Angular：在Popover Box上流连时保持弹出状态
我需要的是这个例子的一个角的版本我在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="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="[email protected]*" 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>不幸的是我新的角度，而且不知道如何翻译这个jQuery的例子角。
你有没有尝试做角？ –
使用UIBootstrap或AngularStrap。 –
@Paresh Gami：我尝试过，但我是Angular的新手，没有idela如何附加到popover box鼠标事件。 – Branko