将Bootstrap弹出框添加到特定的div元素

本文介绍了将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'); });