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

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

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

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

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

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

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

こんな場合におススメ

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

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

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

使用イメージ

テキストをツールチップに表示Simple Tooltips 使用イメージ
ツールチップ内に画像を表示した場合

Simple Tooltips 使用イメージ

インストール方法

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

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

Simple Tooltips

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

関連記事

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

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

ツールチップの表示方法

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

Simple Tooltips 使用方法

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

ショートコード

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

【Simple Tooltips】の設定

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

    Simple Tooltips 設定

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

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

Menu Selectors (Advanced)を設定する

  • STEP1
    クラス・ID名を確認
    使用しているテーマのグローバルメニューが表示されている箇所の『クラスまたはID名』を確認します。

    これは各自使用しているテーマによって異なります。(例:テーマ『JIN』)

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

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

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

  • STEP3
    保存
    【Menu Selectors (Advanced)】を記述したら変更を保存します。

メニューを編集する

  • STEP1
    メニューを開く
    管理画面 > 外観 > メニューを開きます。
    Simple Tooltips メニューにツールチップを表示する場合
  • STEP2
    『タイトル属性』と『CSS Class』を設定
    ツールチップを表示したいメニュー項目の『タイトル属性』と『CSS Class』を設定します。

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

    タイトル属性ツールチップに表示する説明文
    CSS Classtooltips】と記述
  • STEP4
    保存
    『タイトル属性』と『CSS Class』を設定したらメニューを保存します。
  • STEP3
    『タイトル属性』と『CSS class』が表示されていない場合
    『タイトル属性』と『CSS class』が表示されていない場合は、表示オプション内の『タイトル属性』と『CSSクラス』にチェックを入れてください。

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

使用イメージ

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

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

動作確認環境

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

まとめ

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