web-dev-qa-db-ja.com

jQueryUIツールチップはTwitter Bootstrapと競合しています

次のコードを使用して、いくつかのツールヒントfinallyを取得できました。

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

その後

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

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

JQueryUIの代わりにBootstrap Tooltipsを使用するには何をする必要がありますか？

jquery-uitwitter-bootstrap
130
markdotnet

JQuery UIとBootstrapの両方が、プラグインの名前にtooltipを使用します。 $.widget.bridgeを使用してjQuery UIバージョンの別の名前を作成し、Bootstrapプラグインが名前付きツールチップのままになるようにします（Bootstrapで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>
178
The Demz

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

65
Stefan Musarra

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

JQuery-UIを使用する必要があるが、ブートストラップのツールチップを使用する場合は、この website からJQuery-UIのカスタマイズバージョンを取得するだけです。

「ツールチップ」オプションのチェックを外してダウンロードするだけです（「jquery-ui-1.10.4.custom.js」のようになります）。

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

25
Poncho

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のツールチップをオーバーライドし、常にブートストラップを使用します。

21
supersan

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

UIが初期化される直前にbootstrap関数を保存します

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

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

$('.targetClass').bstooltip();
13
Projesh Pal

このソリューション は私にとってはうまくいくようです。

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

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

私はカスタムオートコンプリート/コンボボックスにのみJquery UIを使用しています（そのため、他のJQ-UIコントロールは大丈夫だと主張することはできません）。 BS Popoversに切り替えると、競合、スクリプトインポートの並べ替え、明示的なブリッジステートメントは不要で、基本的に同じ効果が得られました。

6
AgonyOfVictory

簡単で良い解決策があります。bootstrapと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をロードするだけです。それは私の仕事です。

4
Sanjib Debnath

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

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

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

3
Matt

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

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