web-dev-qa-db-ja.com

Twitter bootstrapツールチップの指示が機能しませんか？

私のTwitter bootstrapツールチップがdata-positionを尊重していないことに気づきました。

それで、私は Twitter Bootstrap tooltips demo 、特に「Tooltip on X」の例を見て、これが私が得るものです：に向かいました：

No Direction support?

方向性のサポートがないようですか？

ただし、ツールチップが継承するポップオーバー（またはその逆）は機能します。
Direction support?

試したブラウザ：

Ubuntu12.10上のChromium24.0
Ubuntu12.10上のFirefox19.0

これは報告すべきバグですか、それともここで何か他のことが起こっていますか？

javascripttwitter-bootstraptooltip
12
Hailwood

Jsfiddle ツールチップが機能するJsfiddle

バグではありませんが、初期化する必要があります。
重要Bootstrap Webサイトの状態「パフォーマンス上の理由から、ツールチップとポップオーバーのデータAPIは選択されていますで、つまり、自分で初期化する必要があります。 " Bootstrap Webサイトのツールチップセクション

<div class="navbar tooltip-demo">
        <ul class="nav">
          <li><a class="top" title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a></li>
          <li><a class="right" title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</a></li>
          <li><a class="bottom" title="" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
          <li><a class="left" title="" data-placement="left" data-toggle="tooltip" href="#" data-original-title="Tooltip on left">Tooltip on left</a></li>
        </ul>
      </div>

使用するJavaScript、初期化する必要があります

$('a').tooltip();
22
Shail

ツールチップをBootstrapで初期化するために私が見つけた最も簡単な方法は、どのツールチップでも機能するようにコードを一致させることです。

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

または、実際にこの行をbootstrap-tooltip.jsファイルの最後に追加できます

}(window.jQuery);  //<-- last line of bootstrap-tooltip.js

$("[data-toggle='tooltip']").tooltip();

基本的に、ツールチップコードを使用するかどうかを計画していましたが、デフォルトで有効にした方がよいでしょう。それで、これをbootstrap-tooltip.jsファイルに入れました。

12
M.Hoover

バグだと思います。 http://Twitter.github.com/bootstrap/assets/js/application.js から、デモが「セレクター」オプションで呼び出されていることがわかります。

$('.tooltip-demo').tooltip({
  selector: "a[data-toggle=tooltip]"
});

ただし、 bootstrap-tooltip.js の「show」関数は、「placement」を処理するときに「selector」オプションをチェックしません。したがって、バグが発生しました。

    placement = typeof this.options.placement == 'function' ?
      this.options.placement.call(this, $tip[0], this.$element[0]) :
      this.options.placement

このバグのデモ： http://jsfiddle.net/indream/xFC7G/
関連するgithubの問題： https://github.com/Twitter/bootstrap/issues/6832

7
inDream