twitter-bootstrap - twitter-bootstrapでポップオーバーをどのようにプログラムしますか?

Question

twitter-bootstrapでポップオーバーをどのようにプログラムしますか? JavaScript でポップオーバーを有効にするための一連の手順を探しています。

Answer 1

JavaScript についてはまだ知識がありませんが、ブートストラップ ポップオーバーを実装する方法は次のとおりです。

ドキュメントがポップオーバー プラグインとツールチップ プラグインにリンクされていることを確認してください。リンクされていない場合は、以下を使用してこれらのファイルへのリンクを作成します。

    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>

次のように、body の終了タグのすぐ上に上記のコードを挿入します。

    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>

    </body>

次に、body の終了タグの上に次のスクリプトを挿入します。

    <script type="text/javascript">
     $(function() {$("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })});

全体として、貼り付けたコードは次のようになります。

    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>

    <script type="text/javascript">
      $(function() {
      $("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })});
    </script>

    </body>

次に、ポップ機能用にアンカー タグをマークアップします。そのようです：

<a href="#" class="pop" title="Pop!" data-content="Some Content">

説明、data-content=""ポップオーバーの内容を保持します。title="Pop!"見出しのタイトルを保持します。

class="pop"任意のクラス名を指定できますが、必ず上記のスクリプトで見つかったクラス名と名前を一致させてください。つまり、$("a.pop")

ID を使用する場合は、次のようになります。

 <a href="#" id="pop" title="Pop!" data-content="Some Content">

と...

    <script type="text/javascript">
      $(function() {
      $("a#pop").popover({ animation: true, placement: 'left', trigger: 'hover' })});
    </script>

このサンプル コードは、左のポップオーバーをレンダリングします。他の側にポップしたい場合は、placement: 'left' を、placement: 'top' に変更します。

Answer 2

ブートストラップ サンプル ページのソース コードから取得しました。

$(function () {
  $("a[rel=popover]")
    .popover({
      offset: 10,
      html: true
    })
    .click(function(e) {
      e.preventDefault()
    })
})

これを変更することもできます

$("a[rel=popover]")

ポップオーバーを表示する要素に。