twitter-bootstrap 是否可以在单击其他按钮时显示按钮的 Bootstrap 弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35910634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to show Bootstrap popover of a button on the click on of other button?
提问by Vikas Bansal
I am trying to find out a way to show popovers manually instead on the click of the element.
我试图找到一种方法来手动显示弹出窗口，而不是单击元素。
Given below is a code snippet that is showing two buttons.
下面给出的是一个显示两个按钮的代码片段。
Click me: showing popover on its click. (this should not happen)
show click me popover: which is suppose to show the
click me's popover.Brief: Shown popover on
button1on the click ofbutton2but do not show the popover whenbutton1is clicked
单击我：单击时显示弹出窗口。（这不应该发生）
show click me popover: 这是假设显示
click me的弹出框。简介：在所示酥料饼
button1上的点击button2，但不显示酥料饼时，button1点击是
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
placement: 'top',
html: true,
title: function() {
return 'User Info: ' + $(this).data('title') + ' <a href="#" class="close" data-dismiss="alert">×</a>'
},
content: function() {
return '<div class="media"><a href="#" class="pull-left"><img src=".." class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">' + $(this).data('name') + '</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
}
});
});
$(document).ready(function() {
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
});.bs-example {
margin: 160px 10px 0;
}
.popover-title .close {
position: relative;
bottom: 3px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="bs-example">
<button type="button" data-title="Student" data-name="vikas bansal" class="btn btn-primary" data-toggle="popover" onclick="">Click Me</button>
<button>show click me popover</button>
</div>
</body>回答by mahi-man
As per mmgross answer, but make the trigger manual should work.
根据 mmgross 的答案，但使触发器手册应该可以工作。
$(document).ready(function() {
$('#popoverbtn').popover({
trigger: 'manual',
placement: 'top',
html: true,
title: function() {
return 'User Info: ' + $(this).data('title') + ' <a href="#" class="close" data-dismiss="alert">×</a>'
},
content: function() {
return '<div class="media"><a href="#" class="pull-left"><img src=".." class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">' + $(this).data('name') + '</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
}
});
});
$(document).ready(function() {
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
});.bs-example {
margin: 160px 10px 0;
}
.popover-title .close {
position: relative;
bottom: 3px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="bs-example">
<button type="button" id="popoverbtn" data-title="Student" data-name="vikas bansal" class="btn btn-primary">Click Me</button>
<button type="button"class="btn btn-primary"onclick="$('#popoverbtn').popover('toggle');">show click me popover</button>
</div>
</body>回答by Rajesh
You can trigger popover using $(elementSelector).popover('show').
您可以使用$(elementSelector).popover('show').
You can use trigger:'manual'and this solves issue of popover opening on click me. Credits @Paul French
您可以使用trigger:'manual'，这解决了 .popover 打开的问题click me。学分@Paul French
Also, I have reformatted your code. Its not good to have more than one $(document).ready()
另外，我已经重新格式化了您的代码。多一个不好$(document).ready()
$(document).ready(function() {
registerPopover();
registerEvents();
});
function registerEvents() {
$(document).on("click", ".popover .close", function() {
$("#btn1").popover('hide');
});
$("#btn2").on("click", function() {
$("#btn1").popover('show');
})
}
function registerPopover() {
var contentHTML = '<div class="media">' +
'<a href="#" class="pull-left">' +
'<img src=".." class="media-object" alt="Sample Image">' +
'</a>' +
'<div class="media-body">' +
'<h4 class="media-heading">' + $("#btn1").data('name') + '</h4>' +
'<p>Excellent Bootstrap popover! I really love it.</p>' +
'</div></div>';
var titleHTML = 'User Info: ' +
$(this).data('title') +
' <a href="#" class="close" data-dismiss="alert">×</a>'
$("#btn1").popover({
placement: 'top',
html: true,
trigger: 'manual',
title: titleHTML,
content: contentHTML
})
}.bs-example {
margin: 160px 10px 0;
}
.popover-title .close {
position: relative;
bottom: 3px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="bs-example">
<button id="btn1" type="button" data-title="Student" data-name="vikas bansal" class="btn btn-primary" onclick="">Click Me</button>
<button id="btn2">show click me popover</button>
</div>
</body>