152

次のコードで最終的に機能するツールのヒントをいくつか得ることができました。

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

その後

<script>
    $('[rel=tooltip]').tooltip();
</script>

私が直面している問題は、Bootstraps の代わりに jQueryUI ツールチップ (矢印がなく、大きく醜いツールチップ) を使用していることです。

jQueryUI の代わりに Bootstrap ツールチップを利用するにはどうすればよいですか?

4

12 に答える 12

77

簡単な解決策は、boottrap.tooltip メソッドが優先されるように、jquery-ui.js の後に bootrap.js をロードすることです。

于 2014-10-20T23:18:54.047 に答える
35

jquery-ui.js後でロードする必要がある場合bootstrap.jsは、次のようにします。

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

これにより、jquery-ui のツールチップがオーバーライドされ、常にブートストラップが使用されます。

于 2016-08-04T22:12:22.603 に答える
32

これは私のために働いた：

JQuery-UI を使用する必要があるが、ブートストラップのツールチップを使用したい場合は、このWeb サイトからカスタマイズされたバージョンの JQuery-UI を入手してください。

「Tooltip」オプションのチェックを外してダウンロードします (「jquery-ui-1.10.4.custom.js」のようなものになります)。

現在使用しているバージョンの代わりにプロジェクトに追加するだけで、パーティーの準備が整います。これにより、競合が回避されます。それは私にとって魅力のように働きました！

于 2014-02-28T05:46:17.183 に答える
11

代わりに Bootstrap ポップオーバーを使用するのはどうですか? BS ポップオーバーは、同じ tooltip.js コンポーネントを必要としますが、同じ競合を作成しません。はい、より様式化されていますが、JQuery UI ボタン​​が不安定になることはありません。

カスタム オートコンプリート/コンボボックスにのみ Jquery UI を使用しています (そのため、他の JQ-UI コントロールは問題ないとは言えません)。上記のいずれも、コンボボックス ボタンの CSS の問題を修正するために機能しませんでした。BS Popovers に切り替えても、本質的に同じ効果が得られ、競合も、スクリプトのインポートの並べ替えも、明示的なブリッジ ステートメントも必要ありませんでした。

于 2013-12-17T09:41:37.530 に答える
9

この解決策は私にとってうまくいくようです。

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
于 2013-06-04T03:25:25.113 に答える
3

jQuery.noConflict()を使用してみて、それがまったく役立つかどうかを確認してください。ブートストラップと jQuery が同じ名前空間を使用しているように見えます。おそらく、ブートストラップと jQuery のツールチップが同じ関数に読み込まれるか、どちらかが最初に読み込まれます。

どのライブラリが最初にロードされるかを確認することもできます。通常、JavaScript で同じ関数を 2 回宣言すると、2 番目の関数が使用されます。

3 番目に、jQueryUI パッケージ ( Web サイト)を確認し、ツールチップが含まれていないバージョンをダウンロードできるかどうかを確認します (私が確認したところ、これは完全に実行可能です)。

于 2012-12-05T20:15:03.983 に答える
0

もう 1 つの方法は、jquery UI のカスタム ビルドをダウンロードすることです。

不要なもの (この場合はツールチップ) を除外します。

ここからダウンロードできますhttps://jqueryui.com/download/

このようにして、どこにでも含めることができます

于 2021-06-08T07:52:05.953 に答える