カーソルを合わせた時 タップした時に説明文を表示するには？というご質問を頂きました。 WordPressプラグインやツールをご紹介します。
目次
カーソルを合わせて説明文を出したい
専門用語が並ぶ固定ページに、１つずつハイパーリンクをつけてしまうととびまわって内容が読みづらくなるので、カーソルを合わせたらちょっとした説明が表示される機能をつけたいです。（エクセルでいう“新しいコメント”的な機能かな？）
調べていく中でpopupのプラグインはみつけたのですが、一個一個そんな大げさにじゃなく、チョット説明が表示される程度でいいのですが。。。
なにかアドバイスはありませんでしょうか？
よろしくお願いいたします。
回答 基本はtitle属性のTooltip（ツールチップ）
rachel 様
ご相談ありがとうございます。
まず前置きとして、SEO的には内部リンクでやってあげた方が良いということは申し上げておきます。それを踏まえたうえで以下をご覧ください。
マウスがあった時に説明を表示する、ポップアップ以外の方法としてあるのは、title属性を使う方法でしょうか。
<span title="title属性のツールチップ" style="border-bottom:2px dotted #333;background:#efefef;"> マウスを乗せてみましょう </span>
↓↓↓ 実際の表示 ↓↓↓
マウスを乗せてみましょう
何らかの装飾があった方がユーザーに親切なので別途クラスを作る方が良いと思いますが、class=”CSS装飾クラス” title=”説明文” を追加するだけなので一番シンプルだと思います。
難点としては、スマホだと表示されないことでしょうか。
「title属性 吹き出し デザイン」「title tooltip デザイン」などで検索してみましょう
title属性・ツールチップの応用で誰か何かやってないかな～と検索してみたところ、以下のスクリプトが紹介されていました。
title属性のツールチップカスタマイズは簡単には出来なさそう（少なくともJSなどは必要）と思ったのでこれは便利そうです。
吹き出しツールチップが簡単に作れるスクリプト「PowerTip」
https://allabout.co.jp/gm/gc/449917/
デモページ
http://guide.withabout.net/guide/gp332/449917/fukidashi.html
（スマホでもタップでツールチップが表示されることを確認できました）
上記のリンクを確認した程度ですので、実際の利用等についてはご自身で改めて配布元をご確認下さい。
WordPressプラグイン「Simple Tooltip」
何かないか調べた所、「Simple Tooltip」というのがありました。
https://ja.wordpress.org/plugins/simple-tooltips/
こちらもちょっと試した程度ですが、ショートコードで都度出力する形なのでご要望には近いかもしれません。
[simple_tooltip content=’ここにツールチップの内容’]
常時表示されるテキストや画像
[/simple_tooltip]
のショートコードでcontent=’ ’の中にテキストや画像を入れれば吹き出しで表示してくれます。リンクもOKなようなので、概略を記述して「もっと詳しく知りたい人はこちらをクリック」などでリンクしてあげることも出来そうです。
テキストのみの場合
画像を含めた場合
セッティングでは吹き出しの背景色や文字色、透明度などの設定も可能そうです。
元のテキスト自体は装飾されないようなので、それがちょっともったいないですね。普通のテキストと区別はするべきだと思います。
実際のHTMLにはspan class=”tooltips”と出力されるので、tooltipsクラスに装飾を追加してあげれば簡単そうです。
/* あくまで一例です */
span.tooltips {
border-bottom:2px dotted #333;
background:#efefef;
}
まとめ ショートコードタイプ？ カスタム投稿タイプ？
このプラグインはショートコード出力のみでしたが、専門用語ならポップアップ系プラグインによくある”ポップアップ毎に管理し、ショートコードで表示する”カスタム投稿タイプの方が便利かなとは思います。
同じワードはたくさん出てくると思いますのが、ショートコードのみだと修正の際に過去のショートコードも全て修正しなくてはいけませんので。
プラグイン検索で「tooltip」で検索すると色々出てくるので試してみてくださいね。
「wordpress tooltips」というプラグインは、メニューからツールチップを作っていくタイプのようでした。（こちらは実際には試していないので参考までに）
専門用語のツールチップを作るとしたら、個人的にはメニューから専門用語毎に管理・修正できる方をおすすめします。
参考にして頂ければ幸いです。