29

ブーストラップがポップオーバーをどのように実装しているかはわかりません。私はbootstrap.jsを含めました.Popover（大文字のP）と呼ばれる関数がありますが、彼らの例では以下を使用しています:

$('#example').popover(options)

現在、ツールチップを含める必要があると言われていますが、それが何を意味するのかわかりません。彼らの例にはすべて .js ファイルの束が含まれており、実際にはそれらはすべて一緒にパッケージ化されていると思います。

そして、私は概念実証の段階にあり、最初から正しく機能させようとしているので、ファイル サイズやキャッシュについては気にしていません。

4

3 に答える 3

29

これは非常に簡単な例です：

<html> 
   <head>
       <link href="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
   </head>
   <body>
      <div class="container">
         <div class="well">
            <a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
         </div>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
      <script src="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
      <script>
      $(function (){
         $("#example").popover();
      });
      </script>
   </body>
</html>

サンプルには、必要なツールチップJavaScriptも含まれています。ページのソースを表示するだけです。

于 2012-08-16T19:19:25.020 に答える
11

プロジェクトのホームページにあるダウンロードに含まれるbootstrap.jsのバージョンには、コンパイルされたすべてのプラグインが既に含まれています。これには、bootstrap-tooltip.jsとbootstrap-popover.jsが含まれます。

PopoverjQuery プラグインのコンストラクタ オブジェクトですが、直接インスタンス化する必要はありません。

プラグインは jQuery を拡張し、メソッドを追加します。このメソッド$.fn.popover()が呼び出されると、Popover オブジェクトのインスタンスが作成され、選択した要素にアタッチされます。id="elem"そのオブジェクトには、を使用して要素 (たとえば、)でアクセスできます$('#elem').data('popover')。

これは、基本的にOPで持っていたものを使用して、ポップアップを作成する1つの方法を示す単純なJSFiddle$('#elem').popover()です.

更新: Bootstrap v.3 を使用した JSFiddle

于 2012-08-16T22:03:18.643 に答える
4

ブートストラップでポップオーバーとツールチップが機能しないのはなぜですか?

答えは、ポップオーバーまたはツールチップの初期化コード$("#myButton").popover();を と の下に配置する必要があるということ<script src="js/jquery-1.10.1.min.js"></script>;です <script src="js/bootstrap.min.js"></script>。

次の手順のように。大丈夫だと思います。

<button type="button" id="myPopover" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
      Popover on Right
</button>

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>

<script type="text/javascript">
      $('#myButton').tooltip();
      $('#myPopover').popover();
</script>
于 2013-11-21T09:40:45.310 に答える