将Bootstrap弹出框添加到特定的div元素 [英] Add Bootstrap popover to a specific div element
本文介绍了将Bootstrap弹出框添加到特定的div元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试向包含任意内容的div元素添加引导程序弹出窗口(但我想出的方法不起作用):
I am trying to add a bootstrap popover to a div element that contains arbitrary content like so (but what I came up with doesn't work):
<div id="popover-target">
<h3>I need a popover</h3>
<p>
This is some content for the section
that needs to be explained by the popover.
</p>
</div>
<button class="btn">Show popover</button>
<script>
$(function(){
$('.btn').click(function(){
$('#popover-target').popover({title: 'Title', content: 'Test Content', container: 'body', placement: 'right'});
});
});
</script>
如果将$('#popover-target')
更改为$('.btn')
,则弹出窗口将正确显示.有什么想法吗?
If I change $('#popover-target')
to $('.btn')
then the popover displays correctly. Any ideas?
推荐答案
如果在单击按钮后将鼠标悬停在#popover-target
div上,则您刚刚初始化了按钮单击上的弹出窗口,该按钮应该可以正常工作.如果要在单击鼠标并将鼠标悬停在其上后显示,可以使用
You have just initialized the popover on button click which should work fine, if you hover over the #popover-target
div after button click. If you want to show it after button click with hovering over it, you can use .popover('show')
like:
$('.btn').click(function() {
$('#popover-target').popover({
trigger: 'hover',
title: 'Title',
content: 'Test Content',
placement: 'bottom'
})
.popover('show');
});
这篇关于将Bootstrap弹出框添加到特定的div元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文