リンクにマウスオーバーでツールチップを表示させる方法

Mediaxでは、テキストリンクや画像リンクにマウスオーバーした際に、サイトデザインと統一感のあるツールチップ（吹き出し）を表示させることができます。

サンプルを用意したので、下記のテキストリンクにマウスオーバーしてみてください。

TRIAD

いかがでしょうか？　一般的なツールチップと違い洗練されたデザインと長い文章を記載しても途中で自動で改行が入るのでスマートですよね？

仕組みとしては、リンクにTtitle属性を挿入しているのですが、ここでは簡単に設定方法について解説していきます。

テキストリンクの場合

テキストリンクの場合にはWordPressのエディタから簡単に設定することができます。

まず、リンクを挿入したいテキストを選択し反転させた後、エディタ上部にあるリンク挿入ボタンをクリックします。

リンク挿入の画面に遷移するので、リンク先のURLを記入し、その下にある「タイトル属性」のテキストエリアにツールチップで表示したい文字列を記載します。

画像リンクの場合

まず、通常通り「メディアを追加」ボタンをクリックして記事に画像を挿入します。　ビジュアルエディタに表示された画像をクリックして、鉛筆のようなアイコンをクリックしてください。

画像の編集画面が開くので、「上級者向け」のタブをクリックして「タイトル属性」にツールチップで表示させたいテキストを入力します。　この際リンク先のURLがあれば記入してください。

ブラウザで確認すると、画像にマウスオーバーでツールチップが表示されました。

ナビゲーションメニューの場合

ナビゲーションメニューにもツールチップを表示できます。　「外観」→「メニュー」をクリックして、メニュー構造にある項目の右のアイコンをクリックします。

設定オプションが開くので、「タイトルの属性」のところにツールチップで表示したいテキストを入力します。　終わったら「メニューを保存」をクリックしてください。

このサイトではデモも兼ねて多用していますが、あまり使いすぎるとうっとおしい印象を訪問者に与える可能性があります。　使いどころを考慮して、有効に活用してください。