ブートストラップドロップダウン内にブートストラップポップオーバーを作成する方法は？

Question

これまでhtml、bootstrap、jQuery v1.12.0、jQuery UI-v1.10を使って作成しました。今のところ表示されるのは「メニュー」と呼ばれるボタンです。そのボタンをクリックすると、メニューがドロップダウンされ、 "Popover With Data-Trigger"という右揃えのボックスが表示されます。そのようなことが起こると、私はブートストラップを使って何かをポップオーバーするために "Popover with data-trigger"ボタンをクリックしたいと思っています。 jQueryのようにonclickのものを使ってみましたが、うまくいきません。私は間違って何をしていますか？

$(".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

実は、私は答えを考え出した...事は、私は$を入れるのを忘れ ...私は、右のコードを持っていたです（ドキュメント）.ready（関数（）{ }）;ポップオーバーコードを囲んでいるので、コードは実行されません。私はこれが準備ができていないDOMと関係があると思いますか？私が間違っているなら私を訂正してください。このコードはjqueryで動作するはずです。

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