専門用語などを文章の外に、もう少し詳しく解説したい。もしくは、グローバルメニューなどに簡単な説明を吹き出し表示させたい。
そんなときはツールチップを表示して、簡単な説明文を表示してみてはいかがでしょうか。
ツールチップとは、対象にカーソルを合わせると表示される枠内の補足説明のこと。
HTMLタグでもツールチップを表示することはできますが（title属性で設定）、プラグインを使えばちょっとオシャレなツールチップにすることができます。
【Simple Tooltips】は、ツールチップを吹き出し表示することのできるプラグイン。
カーソルを合わせるとツールチップ内に、注釈文が表示されるようになります。
こんな場合におススメ
- 専門用語などに補足情報を表示したい
- グローバルメニューに簡単な説明を表示したい
- 記事内の用語を、マウスオーバー時に注釈文を吹き出し表示させる
- グローバルメニューにカーソルを合わせたときに、ツールチップを表示する
インストール方法
- ダッシュボード > プラグイン > 新規追加 とクリックする
- Simple Tooltipsで検索する
- 今すぐインストールをクリック。インストール後有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
ツールチップの表示方法
ビジュアルエディタの場合、投稿画面に『Add a Tooltip』ボタンが表示されるので、クリックします。
ボタンクリック後、またはテキストエディタの場合、以下のショートコードの書き換えを行ってください。
[simple_tooltip content='ツールチップに表示する説明文を記述']ツールチップを表示させたい語句[/simple_tooltip]
【Simple Tooltips】の設定
プラグインを有効化すると、管理画面 > 設定 内に【Simple Tooltips】が表示されるので、そこから設定を行います。
| Background Color | ツールチップの背景色の選択 |
|---|---|
| Text Color | ツールチップのテキストの色を選択 |
| Max Width | ツールチップの最大幅を指定 |
| Opacity | ツールチップの透明度を指定 |
| Position | ツールチップを表示する位置を選択 Center：中央 left：左 right：右 |
| Disable On Mobile | モバイル端末でツールチップを非表示にするかの選択 |
| Menu Selectors (Advanced) | メニューにツールチップを表示する場合、メニューのクラスまたはIDを記述する （下記の『メニューにツールチップを表示する方法』を参照） |
メニューにツールチップを表示する方法
Menu Selectors (Advanced)を設定する
使用しているテーマのグローバルメニューが表示されている箇所の『クラスまたはID名』を確認します。
これは各自使用しているテーマによって異なります。（例：テーマ『JIN』）
クラスまたはID名を【Simple Tooltips】設定内の【Menu Selectors (Advanced)】に記述します。
メニューを編集する
管理画面 > 外観 > メニューを開きます。
ツールチップを表示したいメニュー項目の『タイトル属性』と『CSS Class』を設定します。
| タイトル属性 | ツールチップに表示する説明文 |
|---|---|
| CSS Class | 【tooltips】と記述 |
『タイトル属性』と『CSS class』が表示されていない場合は、表示オプション内の『タイトル属性』と『CSSクラス』にチェックを入れてください。
上記の手順を踏むと、メニュー項目のマウスオーバー時に、ツールチップが表示されるようになります。
動作確認環境
- バージョン 2.1.3
- WordPress 5.4.1
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。
まとめ
- 【Simple Tooltips】は、ツールチップを吹き出し表示することのできるプラグイン。
- 専門用語などに簡単な説明文を吹き出し表示させることができます。