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

Question

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

Answer 1

私は、ブートストラップ例のページのソースコードからそれを取った：

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

をあなたはまた、ポップオーバーを示さなければならない要素にこの

$("a[rel=popover]")

を変更してみてください可能性があります。

Answer 2

私はまだJavaScriptについて知識がありませんが、ここではブートストラップポップオーバーを実装する方法を説明します。

次を使用して、それらのファイルへのリンクをしない場合は、あなたの文書がポップオーバーのプラグインとツールチッププラグインでリンクアップしたことを確認してください：

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

はちょうど終了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> 

    </body> 

次に終了bodyタグの上にこのスクリプトを挿入3210

は、したがって、すべてのすべてで、あなたが貼り付けられたコードは次のようになりなければならない。

<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"それは、その後、あなたがIDを使用する場合それは、$("a.pop")

である、ものとあなたの選択の任意のクラス名ですが、上記のスクリプトで見つかったクラス名と名前が一致するようにしてくださいあなたが他の側にそれを上にポップアップ表示したい場合は、このサンプルコードでは、CH、その後、左のポップオーバーをしなければならないので、

<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> 

ようになりますアンケートのプレースメント： 'left'、つまりプレースメント： 'top'