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

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

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

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

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

こんな場合におススメ

  • 専門用語などに補足情報を表示したい
  • グローバルメニューに簡単な説明を表示したい

プラグインを使ってできること

  • 記事内の用語を、マウスオーバー時に注釈文を吹き出し表示させる
  • グローバルメニューにカーソルを合わせたときに、ツールチップを表示する

スポンサーリンク

使用イメージ

Simple Tooltips 使用イメージ

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

Simple Tooltips 画像を表示

インストール方法

Simple Tooltips インストール

  1. ダッシュボードから プラグイン > 新規追加 とクリックする
  2. “Simple Tooltips”で検索する
  3. “今すぐインストール”をクリック。インストール後、有効化する

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

手動でインストールする方法はコチラ

関連記事

WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする […]

WordPressのプラグインをインストールする方法

ツールチップの表示方法

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名を記述する

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

Simple Tooltips メニュー表示方法

メニューを編集する

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

Simple Tooltips メニュー表示方法

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

Simple Tooltips メニュー表示方法

使用イメージ

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

動作確認環境

  • バージョン 2.1.3
  • WordPress 5.2.2
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【Simple Tooltips】はツールチップを使って、注釈・説明文を表示するプラグイン。
  • 専門用語などに簡単な説明文を吹き出し表示させることができます。
ツールチップを表示するプラグイン【Simple Tooltips】の使い方
最新情報をチェックしよう!
スポンサーリンク