ツールチップの作り方

ノーコード

このチュートリアルでは、ツールチップ(マウスオーバーした際に表示される枠内の補足説明)の作り方について学べます。

このレッスンでは、「?」のマークをマウスオーバーした時に表示されるツールチップの作り方を説明します。

まずは、以下のような要素の構成を作りましょう

Div Blockに「Heading Wrapper」というクラスを付けて、入れます。その中にもともと表示されるテキストとDiv Block(クラスなし)を入れましょう。そうしてそのDiv Blockの中に画像(「?」のマーク))と補足説明になるテキストを入れます。テキストに「Description」というクラスを付けます。

そうしたら、Heading WrapperのポジションをRelativeに設定しましょう。

その後は、Descriptionの補足説明にポジションAbsoluteのTop Rightを設定しましょう。そうして上のポジションを-15pxに設定します。そうすると、Descriptionが「?」マークの上に置かれます。

次は、Descriptionの表示と非表示の動きを設定しましょう。今回は、「?」マークとDescriptionの親となるDiv Blockにアニメションをつけましょう。そうすると、マークをマウスオーバーして、マウスを表示された補足説明の要素に移動しても、補足説明が消えませんが、Div Blockの子供以外のところにマウスを移動したら、補足説明も消えます。

では、Div Blockを選択したまま、Interaction設定を開いて、Element TriggetのところでMouse Hoverを選択しましょう。

On Hoverのところに新しいTriggered Animationを作りましょう。その名前をDescription Onにして、以下のような設定をしましょう。

まずは、プラスボタンを押して、Hide/Showを選択します。新しくできたアニメションの項目を右クリックして、Change Targetを押して、カンバスで補足説明の要素をクリックしましょう。そうすると、アニメションのターゲット(表示/非表示の変化)が補足説明の要素に適用されます。

その後は、下のTimingのところのスイッチをOnにしましょう。そうすると、これから設定する表示の仕方がデフォルトで適用されます。その下のディスプレイ設定を非表示に設定しましょう。これでデフォルトで補足説明の要素が見えないようになります。

Actionをもう一つ作って、そのターゲットを同じく補足説明の要素に設定します。そして、下のディスプレイの設定を一番最初のBlockに設定しましょう。

そうすると、Div Blockをマウスオーバーした時に、補足説明の要素が表示されます。

今度は、マウスオーバーを外した時、補足説明の要素を非表示にするアニメーションを設定しましょう。上のDoneを押して、On Hover Outのところにもう一つのTimed Animationを作りましょう。

新しいアクションを作って、そのターゲットを同じく補足説明の要素(Description)に設定しましょう。下のディスプレイの設定をまた非表示にしましょう。

これで、マウスオーバーを外したら、補足説明の要素も消えます。

これで設定が完了です!

動画の説明も是非ご覧ください!