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

はじめに

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

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

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

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

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

• Bubble（https://bubble.io）

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

方法

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

実際に動かしてみる

プレビューを起動します

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

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

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

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

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

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