マウスホバー時にツールチップを表示する方法
2024/06/11
はじめに
ツールチップは、追加のコンテキストを提供し、コンテキスト固有のアクションを取るようにユーザを誘導するために、インターフェイスデザインで通常使用される短いメッセージです。これらのツールチップは、ボタンやアイコンのような特定のUI要素にマウスを置くことでトリガーされます。この効果は、ProtoPieでマウスオーバーとマウスアウトのトリガーを使って、特定の不透明度レスポンスで簡単に実現できます。あなたのプロトタイプでツールチップをシームレスに動作させる方法について、より多くのヒントを提供します。
何を学べるのか
このブログでは、次の方法を学びます：
クエスチョンマークボタンのマウスオーバー状態を作成する
クエスチョンマークボタンのマウスアウト状態を作る
最終的には、このようなものを作ることができるようになります！
ステップバイステップの手順
1. クエスチョンマークボタンのマウスオーバー状態を作る
1. Tooltipレイヤーを選択し、Opacity（不透明度）を0に設定します。
Tooltipレイヤーは、ボタンレイヤーの上にマウスを置いた時だけ表示させたいので、マウスが離れている時は、Tooltipレイヤーを非表示（Opacityを0）に初期設定する必要があります。
2. クエスチョンマークボタンレイヤーにMouse Over（マウスオーバー）トリガーを追加する。
マウスカーソルがButtonレイヤーの上に来ると、その下のレスポンスがトリガーされます。
これは、ユーザーが特定のUI要素にマウスカーソルを合わせたときにレスポンスをトリガーするために追加されます。
3. Mouse Over トリガーに Opacity レスポンスを追加します。Opacityレスポンスで、Tooltipレイヤーの不透明度を100に設定します。
これにより、クエスチョンマークボタンレイヤーにマウスを乗せると、ツールチップレイヤーが表示されるようになります。
4. Mouse OverトリガーにShadowレスポンスを追加します。そしてそれを使って、ボタンレイヤーの下のBGレイヤーを変更します。ここでは、Fill（塗りつぶし）の値を20に、Yの値を20に、Blur（ぼかしの値）を40に設定します。
ユーザーがクエスチョンマークボタンの上にマウスを置くたびに、Shadowレスポンスを使用してクエスチョンマークボタンを強調表示させるようにします。
5. プレビューウィンドウで確認してみましょう。クエスチョンマークボタンの上にマウスを置くと、ツールチップが表示されます。
2. クエスチョンマークボタンのマウスアウト状態を作る
しかし、これではマウスをマウスアウトさせてもツールチップは消えない状態です。そのため、マウス・アウト・トリガーが必要があります。
1. クエスチョンマークボタンレイヤーにMouse outトリガーを追加する。
マウスカーソルをButtonレイヤーの外に出すと、その下にある反応がトリガーされるようになります。
2. Mouse outトリガーに2つのResetレスポンスを追加します。Resetレスポンスの1つをTooltipレイヤーで使用し、もう1つをBGレイヤーで使用します。
💡 なぜResetを使うのか？
レイヤーや変数を正確に初期状態に戻すために、Reset レスポンスを使うことができます。Buttonレイヤーをマウスアウトするとき、すべてを初期状態に戻す必要があります。そこで、Resetトリガーを使用します。
TooltipレイヤーのResetレスポンスは、ツールチップのOpacityを0に戻して消し、BGレイヤーのResetレスポンスは、ボタンの影をリセットします。
3. では、実際に試してみてください！ツールチップのように動作します！ただし、クエスチョンマークボタンのレイヤー上部にカーソルを合わせると、レイヤーの違いでツールチップが変に見えるかもしれません。
💡 これはなぜ起こるのか？
Tooltip BGレイヤー（Tooltipレイヤーの中にある）を選択すると、クエスチョンマークボタンと重なっていることがわかります。
重なっている部分にマウスオーバーすると、2つのインタラクションが起こります：
クエスチョンマークボタンの上にマウスを置いているので、ツールチップが表示される。
ツールチップが表示されると、クエスチョンマークボタン上のマウスがブロックされ、マウスアウトがトリガーされる。
4. Tooltipレイヤーを選択し、プロパティパネルのMake Lower Layers Touchableオプションをチェックして、この問題を解決します。
5. プレビュー・ウィンドウで確認してみましょう。これで、Tooltipレイヤーの下のレイヤーがタッチ可能になりました。つまり、Tooltipレイヤーが表示され、自動的にマウスカーソルを合わせても、マウスアウトは発動しないはずです。
おめでとうございます！
最後に、Mouse Over (マウスオーバー)、Mouse Out (マウスアウト)のトリガー、およびOpacity (不透明度)の反応を使用して、動作するツールチップを作成する方法を学びました。また、ProtoPieでこの効果を得るための便利なヒントやトリックについても学びました。
このチュートリアルで学んだことを使ってProtoPieで是非遊んでみてください！あなた自身のプロトタイプを作成し、TwitterやInstagramで#MadeWithProtoPieをつけてシェアしていただければ幸いです。