【初心者向け】デザイン可能なTooltip textを作成する方法|ノーコード開発ナレッジ【Bubble】

はじめに

Tooltipとは、ユーザーが画面上の要素にカーソルやマウスポインタを合わせる(ホバーする)と補足説明などが表示されるものです。

BubbleにはTooltip text機能が備わっていますが、デフォルトではデザイン性に乏しく、表示もやや遅めです。

本記事では、ユーザーに与えられた権限ごとに実行できる操作が異なる場合を想定し、Tooltipを作成します。

Group Focusエレメント、クリックなどの動作ではなくConditionで実行されるワークフロー、アニメーション表示/非表示を学ぶことができます。

Bubbleのアカウントをお持ちでない場合は、以下のリンクからユーザー登録して下さい。本記事で紹介する機能はすべて無料プランで作成できます。(料金の詳細はこちらをご覧ください:Bubbleの料金は?

それでは早速、作成していきます。

方法

STEP.1
Bubbleエディタを起動し、Buttonを設置します。

STEP.2
続いてGroup Focusを設置します。

STEP.3
Group Focusの"Reference element"をSTEP.1のButtonに設定します。

STEP.4
位置を調節するには"Offset"を設定します。

OffsetはGroup Focusの左上のかどを基準として、

  • Offset top: 正の値で画面下に、負の値で画面上に移動します。
  • Offset left: 正の値で画面右に、負の値で画面左に移動します。

例)Offset top、Offset leftともに0に設定

例)Offset top、Offset leftともに15に設定

STEP.6
Group Focus内にGroupを設置します。GroupはGroup Focusよりも20pxほど低くしておきます。

STEP.7
Groupの背景色を変更します。

STEP.8
Group Focus内にiconを設置します。

STEP.9
サイズ、色、位置を調節し、吹き出しの形に整えます。

STEP.10
Group内にTextを設置します。

STEP.11
Group Focusの背景色を"none"に設定します。

STEP.12
サイズ、色、位置などのデザインは自由に調節して下さい。

STEP.13
Workflowタブに移動します。

STEP.14
"Do when condition is true"イベントを追加します。

STEP.15
削除ボタンがホバーされた時に毎回実行したいので、以下の通りに設定します。

STEP.16
Element Actions > Animateアクションを追加します。

STEP.17
Group Focusが表示されるように、以下の通りに設定します。

STEP.18
さらに削除ボタンのホバーが解除されたときのイベントも追加します。

*”is NOT hovered”であることに注意して下さい。

STEP.19
Group Focusが非表示になるように、以下の通りに設定します。

これですべての設定が完了しました!

実際に動かしてみる

プレビューを起動します

通常ではTooltipは非表示です。

ボタンをホバーすると、Tooltipが表示されます。

ボタンからカーソルを離すと、再度非表示になります。

いかがでしたでしょうか?これがデザイン可能なTooltipの作成方法です。

NoCode DBでは、BubbleやIntegromat、Stripeの技術ナレッジを随時更新しています。

「こんな記事を書いて欲しい!」「この機能はどうやって実装するの?」といったリクエストも受けてますので、お気軽にご連絡下さい。