jQueryUIツールチップがTwitterブートストラップと競合しています

次のコードを使用して、いくつかのツールヒントを最終的に機能させることができました。

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

その後

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

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

jQueryUIの代わりにブートストラップツールチップを使用するには、何をする必要がありますか？

tooltipプラグインの名前には、jQuery UIとBootstrapの両方が使用されます。使用$.widget.bridgejQueryのUIのバージョンに別の名前を作成して、ブートストラップを使用しようとして（という名前のツールチップ滞在するプラグインできるようにするnoConflict、ブートストラップのオプションは、それが正常に動作しないため、単にエラーの多くにつながるウィジェットその問題は、ここで報告されています）：

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

それを機能させるためのコード：

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

ボタンの競合も処理する素敵なコピー貼り付けコード：

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

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

これは私のために働きました：

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

"Tooltip"オプションのチェックを外してダウンロードしてください（ "jquery-ui-1.10.4.custom.js"のようなものになります）。

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

ケースでは、ロードする必要があります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のツールチップをオーバーライドし、常にブートストラップを使用します。

ブートストラップが初期化された後にUIが呼び出されると仮定します

UIが初期化される直前にブートストラップ関数を保存します

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

次に、次のように呼び出します

$('.targetClass').bstooltip();

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

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

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

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

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

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

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

簡単で良い解決策があります。ブートストラップとjquery uiファイルのリンクを次のように再配置するだけです。

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

boostrap jsファイルをロードする前に、jQueryuiをロードするだけです。それは私にとって仕事です。

簡単な方法は、jquery-ui.jsの後にbootstrap.jsをロードして、bootstrap .tooltipがjquery UIをオーバーライドするようにすることです。requirejsのようなモジュールローダーを使用している場合は、ブートストラップをjquery-uiに依存させることができます。

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...