Bootstrap3のtooltipが動かないと思ったら、jQuery UIのtooltipと競合していた件
- 2016-01-09
割と便利なツールチップやポップアップのあるBootstrapですが、久々に使おうと思ったら、機能しないでやんの！
なんでだよと調べたが、日本語のページはあまりなかったので、いつものごとく雑にまとめてみました。
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 Post はいかがですか？
- おすすめってほどでもない、少々マニアックなjQueryスライダー系プラグインまとめ
- ブラウザの高さ取得は、jQueryを使わなくてもCSSのvhでカンタンにできる！
- 「Sublime Textのテーマでおすすめ無いっすか？」ってときに役立つサイト
- FirefoxのレスポンシブデザインビューとTab Mix Plusのショートカットキーが競合しやがったから無効化！
- 従来のLikeboxをPage Pulginに変更したらiframeの幅に縛りあり！
コメントを残す