如何在引導程序下拉列表中創建引導程序彈出窗口？

Question

我使用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>

Answer 1

其實，我想出了答案......事情是我有正確的代碼...... 我忘了把$（文件）。就緒（函數（）{ }）;圍繞我的popover代碼，所以代碼不會運行。我認爲這與DOM沒有準備好有關？糾正我，如果我是錯的傢伙。這段代碼應該適用於jQuery。

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