BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Bootstrap 3.0 ポップオーバーとツールチップ

2023-06-18 16:29:54

質問

Bootstrap の初心者なのですが、ポップオーバーとツールチップの機能がうまく動作せず困っています。ドロップダウンとモデルには問題がありませんでしたが、ポップオーバーとツールチップのために何かが欠けているようです。

ツールチップは表示されるのですが、ブートストラップの例のようなスタイルと位置ではありません。そして、ポップオーバーはまったく機能していません。

見てみて、何が足りないか教えてください。 

       <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
        <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
        <link href="css/index.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
       <p id="tool"class="muted" style="margin-bottom: 0;">
        Tight pants next level keffiyeh
        <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
       <h3>Live demo</h3>
        <div style="padding-bottom: 24px;">
          <a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript">
            $(document).ready(function() {

                $('.tool').tooltip();
                $('.btn').popover();

            }); //END $(document).ready()

        </script>

        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>

      </body>

    </html>

どのように解決するのですか？

以下のことが判明しました。 Evan Larsen が最適な答えを持っています。 . 彼の答えは素晴らしいので、ぜひアップヴォートしてください（または正解に選んでください）。

動作するjsFiddleはこちら

エヴァンのトリックを使えば、1行のコードですべてのツールチップをインスタンス化することができます。 

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

長い段落の中の全てのツールチップが、この1行だけで動作するようになったことがわかると思います。

jsFiddleの例（上のリンク）では、1つのツールチップ（サインインボタンのそば）がデフォルトでオンになっている状況も追加しました。また、ツールチップのコードは、HTMLマークアップではなく、jQueryでボタンに追加されます。

ポップオーバー する はツールチップと同じ働きをします。 

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

こうして出来上がりました。ついに成功です。

この内容を理解する上で最も大きな問題の1つは、ブートストラップをjsFiddleで動作させることでした... ここで、あなたがしなければならないことがあります。

  1. Twitter Bootstrap CDN のリファレンスを取得します。 http://www.bootstrapcdn.com/

  2. 各リンクをメモ帳に貼り付け、URL以外をすべて削除してください。たとえば

    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

  3. jsFiddleの左側で、外部リソースのアコーディオンのドロップダウンを開きます。
  4. 各URLを貼り付け、貼り付けの後にプラス記号を押します。
  5. ここで、quot;Frameworks & Extensions" アコーディオンのドロップダウンを開き、jQuery 1.9.1 (またはそのいずれか...) を選択します。

これで準備は完了です。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します