html - TwitterブートストラップポップオーバーのHTMLマークアップ

Question

私は、次のようなBootstrapポップオーバーを使用するために使用するCSSクラスを把握しようとしています。

上記の例は、ブートストラップドキュメントの最初の例に似ています。

divマークアップのみを使用し、JavaScriptの呼び出しやクリックを必要とせずに、上記のようなポップオーバーを要素で機能させるにはどうすればよいですか？

Answer 1

ポップオーバーをレンダリングするHTMLは次のようになります。

<div class="popover right popover-example">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover right</h3>
    <div class="popover-content">
        <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
</div>

ただし、デフォルトで.popupはdisplay: noneそうなので、オーバーライドすることもできます。この場合、クラスを追加しpopover-example、次の追加のCSSを定義します。

.popover.popover-example {
    display: block
}

Answer 2

<div class="popover right">
    <div class="arrow"></div>
    <h3 class="popover-title">Your title here</h3>
    <div class="popover-content">
        <p>Your content here</p>
    </div>
</div>

クラス「right」を、表示したい方法に置き換えます。