ツールチップを表示するプラグイン【Simple Tooltips】の使い方

専門用語などを文章の外に、もう少し詳しく解説したい。もしくは、グローバルメニューなどに簡単な説明を吹き出し表示させたい。

そんなときはツールチップを表示して、簡単な説明文を表示してみてはいかがでしょうか。

ツールチップとは、対象にカーソルを合わせると表示される枠内の補足説明のこと。
HTMLタグでもツールチップを表示することはできますが（title属性で設定）、プラグインを使えばちょっとオシャレなツールチップにすることができます。

【Simple Tooltips】は、ツールチップを吹き出し表示するプラグイン。
カーソルを合わせるとツールチップ内に、注釈文が表示されるようになります。

使用イメージ

下はツールチップ内に画像を表示した場合。

インストール方法

または、配布サイトからダウンロードして、インストール。
Simple Tooltips – WordPress プラグイン | WordPress.org

手動でインストールする方法はコチラ
WordPressのプラグインをインストールする方法

ツールチップの表示方法

ビジュアルエディタの場合、投稿画面に『Add a Tooltip』のボタンが表示されるので、クリックしてください。

ボタンクリック後、もしくはテキストエディタの場合、以下のショートコードの書き換えを行ってください。

[simple_tooltip content='ツールチップに表示する説明文を記述する']ツールチップを表示させたい語句[/simple_tooltip]

設定

プラグインを有効化すると、管理画面 > 設定 に『Simple Tooltips』が表示されるので、そこから設定を行ってください。

メニューにツールチップを表示する方法

グローバルメニューにツールチップを表示するには、いくつか手順が必要ですので順を追って説明します。

『Menu Selectors (Advanced)』にクラス・ID名を記述する

使用しているテーマのメニューが表示されている箇所の、クラスまたはID名を確認し、設定内の『Menu Selectors (Advanced)』に記述します。
これは各自使用しているテーマによって異なります。
例：テーマ『Jin』では『#drawernav3』

メニューを編集する

外観 > メニューに移動し、『タイトル属性』と『CSS class』を編集します。
『タイトル属性』にツールチップに表示する説明文、『CSS class』に『tooltips』と記述してください。

『タイトル属性』と『CSS class』が表示されていない場合は、表示オプション内の『タイトル属性』・『CSSクラス』にチェックを入れてください。

使用イメージ

上記の手順を踏むと、メニュー項目のマウスオーバー時に、ツールチップが表示されるようになります。

動作確認環境

まとめ

ランキングに参加しています。

クリックしていただけると、ブログ更新の励みになります。