ツールチップとはオブジェクトにマウスを乗せたときに、補足情報などを表示させる要素のことを言います。「常に表示させておくほどでもない補足的な情報」をツールチップとして表示すれば、画面上をよりスッキリした印象にできるメリットがあります。このツールチップの実装は、STUDIOの場合、簡単そうに見えてひと工夫必要です(上記の例であれば円形のアイコンの部分以外には当たり判定が出ないようにしなければなりません)。この記事では画面キャプチャを示しながら、ツールチップ実装の手順を解説していきます。目次1. ベースとなるボックスを作成し、アイコンとツールチップを入れるレイヤー自体は複雑ではなく、以下のような作りとなっています。ベースとなるボックス(今回は正円)の中にアイコンとツールチップのボックスを入れ込む構造です。ホバーに連動してツールチップを表示させるためには、ベースのボックス内にツールチップのボックスを入れ込むことが必須となりますので、ご注意ください。2. ツールチップの設定:サイズは0で、透明にするテキストを入れるボックスの設定ツールチップのボックスを絶対配置にし、ホバー時に表示させたい任意の位置に配置します(ライブプレビューで実際の挙動を確認しながら位置の微調整をするとうまくいきやすいです)。ボックスのサイズは縦横いずれも「0%」、透明度も「0」とします。なお、ここでパディングを設定すると、ツールチップを隠しているつもりが透明のボックスの判定が残ってしまうため、パディングも必ず「0」とします。テキストの設定ツールチップで表示させたいテキストを入力し、横幅と縦幅を「auto」にします。文字色は透明に設定しておきます。3. ホバー時のツールチップの設定:隠していたボックスを出現させるテキストを入れるボックスの設定ベースとなるボックスに何らかのホバーの設定をつけたあと、ツールチップのボックスの「inホバー」の設定をおこないます。横幅および縦幅を「%」にして、テキストの収まりがよい数値を設定します。ここはベースとなるボックスのサイズによって適切な値が大きく変わるため、プレビューで確認しながら調整していきます。今回は横幅900%、縦幅210%にしています。つぎに透明度を「1」にします。これで通常時は0サイズで透明になっていたボックスがホバー時のみ出現する設定ができました。角丸や枠線、シャドウはお好みで設定してください。ボックスのモーションについては必須の設定は無く、お好みで構いません。テキストの設定テキストのinホバーの設定で「文字色を色付き」にします(今回は黒)。また、テキストに関してはモーションで遅延を設定するとホバー時の挙動がわずかに自然になりますので、ここでは「300」としています(ボックスが出現してから少しだけ遅れてテキストが表示される設定)。まとめ以下のようにツールチップの表示場所を調整すれば、SNSアイコンにホバーしたときに特定のメッセージを表示するといったデザインを実装することも可能です。今回ご紹介した方法は%の設定を使って、半ば無理矢理に実装する形にはなりますが、ツールチップを取り入れたいという方の参考になれば幸いです。