RUIN OF THE WEB DESIGNER

Webデザイナーの成れの果て

Bootstrap3のtooltipが動かないと思ったら、jQuery UIのtooltipと競合していた件

割と便利なツールチップやポップアップのあるBootstrapですが、久々に使おうと思ったら、機能しないでやんの!
なんでだよと調べたが、日本語のページはあまりなかったので、いつものごとく雑にまとめてみました。

echo Fuzakenna

Bootstrapの読み込み

<html lang="ja">
<head>
    <meta charset="UTF-8">
...(略)...
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="../js/bootstrap.js" type="text/javascript"></script>
    <script src="../js/jquery-ui.min.js" type="text/javascript"></script>
</head>

まぁ、こんな感じで、headがあって、

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

jsを書きますわね。

しかし全く動かない!

拙い英語力でサイトを解読したところ、どうやらjQuery UIに入ってるtooltipとコンフリクトしているらしい!
で、以下のコードを追加すれば解決されるとのこと。

    // ui-tooltipとbootstrapのtooltipが競合して動かなくなるのを防ぐため
        $.widget.bridge('uibutton', $.ui.button);
        $.widget.bridge('uitooltip', $.ui.tooltip);

しかしまだうまく動かない!

嘘ばっか!
苦戦した挙句、jsの読み込み順を変更。

<html lang="ja">
<head>
    <meta charset="UTF-8">
...(略)...
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="../js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../js/bootstrap.js" type="text/javascript"></script>
    <script>
        // ui-tooltipとbootstrapのtooltipが競合して動かなくなるのを防ぐため
        $.widget.bridge('uibutton', $.ui.button);
        $.widget.bridge('uitooltip', $.ui.tooltip);
        // tooltip
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip({
                placement : 'right'
            });
        });
    </script>

読み込む順番が、
bootstrap→jquery-ui
だったのを
jquery-ui→bootstrapに。

こんな感じでオール解決!
はぁ、疲れた。
こないだのowncloudとかもそうだけど、最近、こんなんばっか!

おわりに

同じような人が現れないことを願って、記事を書きました。
では。

ご一緒に、Related Potato はいかがですか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This blog is kept spam free by WP-SpamFree.