QA@IT

Bootstrapのpopover内部でpopoverを表示する方法

5413 PV

参考にしているのはこのサイトです。Bootstrapの公式ページです。popoverというポップアップのようなものを表示する機能について質問です。
http://getbootstrap.com/javascript/#popovers

popoverを使用すると、ポップアップのような表示が行えますが、この内部から、もう一つのポップアップを表示する事は出来ないのでしょうか?

popoverのサンプル内にボタンを配置して、そこからpopoverを呼び出すイメージです。
出来れば具体的なサンプルが頂きたいです。
よろしくお願いします。

回答

自己解決しました。どうも単純なミスだったらしく、普通に出来ました。

以下がHTMLのソースです。bodyタグの中身だけ書いています。


<table>
    <a href="#" role="button" id="popover-btn1" class="btn popover-test">ポップオーバー出す</a>
</table>

<span style="visibility: hidden">
    <div id="pop-no-nakami">
        <a href="#" role="button" id="popover-btn2" class="btn popover-test">もう一つのポップオーバー出す</a>
    </div>
</span>

</body>

JavaScriptのソースは以下の通りです。

$(function() {
    $('#popover-btn1').popover({
        html: true,
        title: "popover title",
        placement: "bottom",
        content: $('#pop-no-nakami').html()
    });
    //ポップオーバーの中のボタンのクリックイベント
    $('body').on('click','#popover-btn2',function(){
        $(this).popover({
            html: true,
            title: "popover title",
            placement: "right",
            content: "abc"
        }).popover('show');
    });
});

なぜか、HTML側で、data属性を使用してパラメータを渡すと、2つ目のポップアップの表示ボタンが動作しない事がありました。
どうも、popoverメソッドの引数として設定値を入れている状態で、data属性からも設定値を入れていると、動作がおかしくなるみたいです。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。