如何在引导下拉菜单中创建引导弹出框？答案

【问题标题】：How to create a bootstrap popover within a bootstrap dropdown?如何在引导下拉菜单中创建引导弹出框？
【发布时间】：2017-06-15 22:01:58
【问题描述】：

到目前为止，我使用 html、bootstrap 和 jQuery v1.12.0 以及 jQuery UI - v1.10 创建了这个。到目前为止，显示的是一个显示“菜单”的按钮。单击该按钮后，菜单将下拉并显示一个右对齐的框，上面写着“带有数据触发器的弹出窗口”。一旦发生这种情况，我希望能够单击“使用数据触发器弹出”按钮以使用引导程序弹出某些内容。我尝试使用 onclick 的东西，如 jquery 所示，但它不起作用。我做错了什么？

$(".dropdown-menu").css('margin','50px');
$(function () {
  $('[data-toggle="popover"]').popover()
})
$("#popoverData").popover({ trigger: "hover" });

<div class="btn-group" style ="left:1860px;top:-140px;">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Menu
  </button>
  <div class="dropdown-menu dropdown-menu-right" style="background: rgba(0,0,255,.35);">
    <a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
  </div>
</div>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

实际上，我找到了答案...问题是我有正确的代码... 我忘了放 $(document).ready(function() {});围绕我的弹出框代码，所以代码不会运行。我认为这与 DOM 没有准备好有关吗？如果我错了，请纠正我。这段代码应该适用于 jquery。

$(document).ready(function() {
    $(".dropdown-menu").css('margin','50px');
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
    $("#popoverData").popover({ trigger: "hover" });
});

【讨论】：