CSS確認のためにBootstrapのTooltipを常に表示する

TooltipのCSSを確認したいけど、、、

BootstrapのTooltipを使用している時、そのCSSを確認/編集するために、ChromeのDev Toolsを使用して内容を確認したい時があります。

しかし困ったことに、このTooltipはデフォルトではマウスオーバーした時のみ表示されるため、肝心のDev Toolsを使用しようとマウスカーソルを移動させると、Tooltipが消えてしまいます。

下の画像のようにDev toolsのhoverなどを有効にしても、Tooltipは表示されません。

そのため、triggerを変更するなどのトリックが用いられることが多いかと思います。
しかしこの記事では、オリジナルのファイルを変更することなくTooltipを常に表示させる方法を紹介します。

Dev Toolsを使用してTooltipを常に表示する

今回紹介する方法では、Google ChromeのDev Toolsを使用します。
(基本的にはChromeの使用を前提としていますが、Firefoxでも同様の方法が使用できます)

以下に、手順を説明します。

1. Tooltipがセットされている要素にフォーカスを合わせる

まず、BootstrapのTooltipがセットされている要素にフォーカスを合わせます。フォーカスを合わせる方法は、以下のいずれの方法でもかまいません。

• 要素をクリックする
• Dev ToolsのSelectorを使用する (下画像を参照)

2. mouseenter イベントを発生させる

BootstrapのTooltipは、デフォルトではmouseenterイベントによって表示されるようになっています。そのため、Tooltipがセットされた要素に対してmouseenterイベントを発生させることで、Tooltipを表示させることができるようになります。これは、Dev ToolsのConsoleで、以下のコマンドを実行させることにより実現できます。

$($0).trigger('mouseenter')

先頭の$はjQueryのセレクタですが、パラメータとして渡している$0は、最後に選択した要素(DOM)への参照を意味します。つまり、フォーカスを合わせた要素に対して、mouseenterイベントを発生させるということになります。

こうして、マウスオーバーしているかどうかに関わらず、Tooltipが常に表示されます。やったね！

補足

要は、対象の要素をセレクトする方法がわかっていればイベントを発生させることはできます。そのためidなどがセットしてある場合、フォーカスを合わせずとも以下のようにしてイベントを発生させることができます。

$('#something').trigger('mouseenter')