MENU

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

2020 6/02

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

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

ツールチップとは、対象にカーソルを合わせると表示される枠内の補足説明のこと。

HTMLタグでもツールチップを表示することはできますが(title属性で設定)、プラグインを使えばちょっとオシャレなツールチップにすることができます。

【Simple Tooltips】は、ツールチップを吹き出し表示することのできるプラグイン。

カーソルを合わせるとツールチップ内に、注釈文が表示されるようになります。

こんな場合におススメ

  • 専門用語などに補足情報を表示したい
  • グローバルメニューに簡単な説明を表示したい
プラグインを使ってできること
  • 記事内の用語を、マウスオーバー時に注釈文を吹き出し表示させる
  • グローバルメニューにカーソルを合わせたときに、ツールチップを表示する
目次

インストール方法

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

または、配布サイトからダウンロードして、インストール。

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

ツールチップの表示方法

STEP
Add a Tooltipをクリック

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

Simple Tooltips 使用方法
STEP
ショートコードを書き換える

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

ショートコード
[simple_tooltip content='ツールチップに表示する説明文を記述']ツールチップを表示させたい語句[/simple_tooltip]
STEP
使用イメージ
Simple Tooltips 使用イメージ

【Simple Tooltips】の設定

STEP
Simple Tooltipsを開く

プラグインを有効化すると、管理画面 > 設定 内に【Simple Tooltips】が表示されるので、そこから設定を行います。

Simple Tooltips 設定
STEP
項目の設定
Simple Tooltips 設定
Simple Tooltips 設定
Background Colorツールチップの背景色の選択
Text Colorツールチップのテキストの色を選択
Max Widthツールチップの最大幅を指定
Opacityツールチップの透明度を指定
Positionツールチップを表示する位置を選択 Center:中央 left:左 right:右
Disable On Mobileモバイル端末でツールチップを非表示にするかの選択
Menu Selectors (Advanced)メニューにツールチップを表示する場合、メニューのクラスまたはIDを記述する (下記の『メニューにツールチップを表示する方法』を参照)
STEP
保存
項目を設定したら変更を保存します。

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

Menu Selectors (Advanced)を設定する

STEP
クラス・ID名を確認

使用しているテーマのグローバルメニューが表示されている箇所の『クラスまたはID名』を確認します。
これは各自使用しているテーマによって異なります。(例:テーマ『JIN』)

Simple Tooltips メニューにツールチップを表示する場合
STEP
クラス・ID名を設定

クラスまたはID名を【Simple Tooltips】設定内の【Menu Selectors (Advanced)】に記述します。

Simple Tooltips メニューにツールチップを表示する場合
STEP
保存
【Menu Selectors (Advanced)】を記述したら変更を保存します。

メニューを編集する

STEP
メニューを開く

管理画面 > 外観 > メニューを開きます。

Simple Tooltips メニューにツールチップを表示する場合
STEP
『タイトル属性』と『CSS Class』を設定

ツールチップを表示したいメニュー項目の『タイトル属性』と『CSS Class』を設定します。

Simple Tooltips メニューにツールチップを表示する場合
タイトル属性ツールチップに表示する説明文
CSS Classtooltips】と記述
STEP
保存
『タイトル属性』と『CSS Class』を設定したらメニューを保存します。
STEP
『タイトル属性』と『CSS class』が表示されていない場合

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

Simple Tooltips メニューにツールチップを表示する場合
STEP
使用イメージ

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

Simple Tooltips メニューにツールチップを表示する場合

動作確認環境

  • バージョン 2.1.3
  • WordPress 5.4.1

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

まとめ

  • 【Simple Tooltips】は、ツールチップを吹き出し表示することのできるプラグイン。
  • 専門用語などに簡単な説明文を吹き出し表示させることができます。
目次
閉じる