web-dev-qa-db-ja.com

Bootstrap 3.0 Popoversとツールチップ

私はBootstrapに慣れていないので、popoverとtooltipの機能をうまく動かすことができません。ドロップダウンやモデルには問題ありませんでしたが、ポップオーバーやツールチップには欠けているようです。

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

見て、行方不明のものを教えてください。

       <!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>
javascriptjquerycsstwitter-bootstrap
83
user2560895

そのことが判明しました Evan Larsenが最良の答えを持っています 。彼の答えを支持してください（そして/またはそれを正しい答えとして選択してください） - それは素晴らしいです。

ここではjsFiddleを動かしています

Evanのトリックを使用すると、1行のコードですべてのツールチップをインスタンス化できます。

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

長い段落のすべてのツールチップには、その1行だけのツールチップがあります。

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

Popoversdoはツールチップと同じように機能します。

$('[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で、External Resourcesアコーディオンのドロップダウンを開きます。
  4. 各URLを貼り付け、各貼り付けの後にプラス記号を押します
  5. それでは、 "Frameworks＆Extensions"アコーディオンのドロップダウンを開き、jQuery 1.9.1（またはどちらか一方）を選択してください。

今、あなたは行く準備ができています。

146
cssyphus

ツールチップを有効にするために、すべてのページでこれを使用します。

$(function () { $("[data-toggle='tooltip']").tooltip(); });
229
Evan Larsen

BOOTSTRAP 3を使った作業：短くて簡単

チェック - JSFiddle

HTML

<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>    
</div>

ジャバスクリプト

$(function () { 
    $("[data-toggle='tooltip']").tooltip(); 
});
26
Abhishek Goel

DOMの準備はできています

$( document ).ready(function () { // this has to be done after the document has been rendered
    $("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips
    $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        'placement': 'top',
        'show': true
    });
});

ロード命令を次のように変更します。

  • jQuery
  • jQueryのUI
  • Bootstrap
6
Jonathan

何らかの理由で私が自分のコードを動作させることができた唯一の方法はいくつかのことを切り替えることです。これまでのところ何もうまくいかなかった場合は、これを試してみてください。

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});
5
santa

RailsとActiveAdminを使用している場合は、これが問題になります。 https://github.com/seyhunak/Twitter-bootstrap-Rails/issues/450 基本的に、active_admin.jsとの衝突

これが解決策です。 https://stackoverflow.com/a/11745446/264084 （カレンの答え）tldr：active_admin資産を「ベンダ」に移動します。ディレクトリ。

0
Arcolye

ツールチップを有効にするだけです。

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
0
xXPhenom22Xx

スクリプトに構文エラーがあり、xXPhenom22Xxで説明されているように、ツールチップをインスタンス化する必要があります。

<script type="text/javascript">

    $(document).ready(function() {

        $('.btn-danger').tooltip();

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

</script>

私はあなたのクラス "btn-danger"を使ったことに注意してください。別のクラスを作成することもid="someidthatimakeup"を使用することもできます。

0
cssyphus