目次
はじめに
Tooltipとは、ユーザーが画面上の要素にカーソルやマウスポインタを合わせる(ホバーする)と補足説明などが表示されるものです。
BubbleにはTooltip text機能が備わっていますが、デフォルトではデザイン性に乏しく、表示もやや遅めです。
本記事では、ユーザーに与えられた権限ごとに実行できる操作が異なる場合を想定し、Tooltipを作成します。
Group Focusエレメント、クリックなどの動作ではなくConditionで実行されるワークフロー、アニメーション表示/非表示を学ぶことができます。
Bubbleのアカウントをお持ちでない場合は、以下のリンクからユーザー登録して下さい。本記事で紹介する機能はすべて無料プランで作成できます。(料金の詳細はこちらをご覧ください:Bubbleの料金は?)
- Bubble(https://bubble.io)
それでは早速、作成していきます。
方法
OffsetはGroup Focusの左上のかどを基準として、 例)Offset top、Offset leftともに0に設定 例)Offset top、Offset leftともに15に設定 *”is NOT hovered”であることに注意して下さい。 これですべての設定が完了しました! プレビューを起動します 通常ではTooltipは非表示です。 ボタンをホバーすると、Tooltipが表示されます。 ボタンからカーソルを離すと、再度非表示になります。 いかがでしたでしょうか?これがデザイン可能なTooltipの作成方法です。 NoCode DBでは、BubbleやIntegromat、Stripeの技術ナレッジを随時更新しています。 「こんな記事を書いて欲しい!」「この機能はどうやって実装するの?」といったリクエストも受けてますので、お気軽にご連絡下さい。
実際に動かしてみる