jQuery UI と BootstrapのTooltipの競合を回避して共存させて両方使う

よく使いそうで忘れそうなので個人メモ。

タイトルの通り。jQueryUIとBootstrapのTooltip関数は名前が同じなので競合する。実際の動作は対象へのホバーでツールチップが表示される、というもので、使い方は同じだけれど、その設定や挙動は結構違う。

Bootstrapはhtml要素自体にパラメータを設定したりできるのでjsファイルを用意する必要がなかったりして、その分では便利だけれど、ajaxでデータを持ってきて表示させたりする時に不便。htmlコードも扱えるけれど、複雑なコードを書こうとすると面倒くさい。title=''に基本全部書き込む必要があるので、例えば、

<div class='tool-tip' title='これが表示されるよ<img src='test.jpg'>'>hoge</div>

これはあからさまだけれど、画像のsrcが表に出てきちゃう。divとかリスト要素のネストとかを複雑に入れ込もうとすると、その中の"'に全部気を配るのは大変だし、非生産的このうえないわけで。

もちろん、BootstrapのTooltipにも、表示イベントとかあって、これをトリガーにしてゴソゴソすれば行けるっぽいけれど、対象要素を探したりするのが面倒くさこちゃんなので、てっとり早く両方を共存させて両方使えるようにしちゃえばよい。

だがそのままだと、両方のTooltipは同じ名前で定義されちゃってるので、競合しちゃう。これを回避しなければならない。まさにな回答があったのでそのまま利用する。先人たちありがとう！

jQueryUIのtooltipだと、コンテンツ部分をjsファイルで制御できるので、json形式でhtml内に書き込み、これを拾って書き出せる。

<div class="msc-item-box d-inline-block result-item" data-item="{&quot;data&quot;:&quot;\u003Cdiv class=\u0027cost-avg-calc\u0027\u003E34 \u5468 \u003Cdiv class=\u0027msc-item-box d-inline-block is-small middle\u0027\u003E\n\u003Cdiv class=\u0027msc-item-box-name\u0027\u003E\nAP\u003C\/div\u003E\n\u003Cdiv class=\u0027msc-item-box-num\u0027\u003E\n1360\u003C\/div\u003E\n\u003C\/div\u003E\n\u003C\/div\u003E&quot;}">
ツールチップ対象</div>
</div>

jsonにしてしまえば直接書き込んでも表に出てこない。やったぜ。

読み込み順序

jQueryUIから先に読み込まないとエラーが出るらしい。
また、Bootstrapのtooltipは事前にpopperがないと、これまたエラーが出る。

    <script src="jquery-ui.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="bootstrap.js"></script>

jQueryUIのTooltipメソッドを別名にする

先のQAから引用するとこう。

<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 buttonメソッドをuibuttonに、tooltipをuitooltipで定義してあげている。

jQuery UIそれぞれのメソッドはこのwidget.bridgeで定義されているみたいで、こいつで別名を付けてあげればBootstrapと共存できる。

view.js

    $(".tp").tooltip();
    $('.result-item').uitooltip({
        items: "[data-item]",
        content: function () {
            return $(this).data("item").data
        }
    });

あとはそれぞれの利用方法で使ってあげる。