ヘルプメッセージ等を表示する際に、tooltipを使われているサービスをよく拝見します。
同じように該当部分をホバーすると、ヘルプメッセージを表示するという用途でBootstrapのtooltipを使用したのですが、動かず...
原因を調べたらなんと、jQuery-uiのtooltipとのコンフリクト 。
普通に知らねーよとは思いつつも、以下に対処法をまとめました。
jsマニフェストファイルにて、bootstrapとjquery-uiの読み込む順番を変えてあげる
application.js
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require jquery-ui
//= require bootstrap-sprockets
//= require ckeditor/init
//= require moment
//= require bootstrap-datetimepicker
//= require fullcalendar
//= require fullcalendar/lang/ja
//= require knockout
//= require bootstrap-colorpicker.min
//= require turbolinks
//= require_tree .
これだけです。
中には以下のように対処されている方もいるかと思いますが、僕の場合動かなかったので読み込む順番を変えることで対応しました。
tooltipの初期化設定を書くファイル.js
// ui-tooltipとbootstrapのtooltipが競合して動かなくなるのを防ぐため
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
以上です。
プラグインのコンフリクトは見えにくいところなので、気をつけていきましょー