モーダル・通知・タブコード生成用
ツールチップ
アイコンや言葉に、短い補足を添える。
用途・説明
アイコンや用語にカーソルを合わせる、またはフォーカスすると、短い説明が現れるツールチップを作成します。マウスだけでなく、キーボードやスマホのタップでも見られるようにしています。画面の端では、はみ出さない向きに自動で切り替えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[対象の例]- 例：「送料について」の文字と、その横の「?」アイコン
[説明の文]- 例：3,000円以上のご注文で、送料が無料になります
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ツールチップ」を実装してください。 ## 表示内容 - 対象：[対象の例] - ツールチップ：[説明の文] ## レイアウト - 対象の真上に、8px 離して表示する。横は対象の中央にそろえる - 対象のほうを指す、小さな三角形のしっぽを付ける - 上に表示する場所がないときは下に、左右がはみ出すときは画面のなかに収まるよう横にずらす - 最大幅 240px。長い文は折り返す ## デザイン - ツールチップ：背景 #1B2A44、角丸 6px、padding 8px 12px、文字 #FFFFFF・13px・line-height 1.6 - しっぽ：ツールチップと同じ色、幅 10px - 「?」のアイコン：18px の円、背景は #1463F0 の9%の淡い色、文字 #1463F0・12px・font-weight 700 - 対象が文字の場合は、下に点線（1px dashed #8A96AA）を引いて、補足があることを示す ## 動作 - hover したら 0.3秒後に表示し、離れたらすぐ消す（かすっただけで出ないようにする） - フォーカスしたときは、すぐに表示する - スマホでは、タップで表示し、ほかの場所をタップすると消す - Esc キーで消せる - ツールチップの上にカーソルを移しても、消えないようにする - 表示は 0.15秒のフェード ## 使いどころ - 補足の短い文だけに使う。リンクやボタンなど、操作できるものは入れない - なくても操作できる情報だけを入れる（必須の説明は、常に見える場所に書く） ## アクセシビリティ - 対象は button 要素（またはフォーカスできる要素）にする - ツールチップに role="tooltip" と id を付け、対象の aria-describedby で結びつける - 「?」のアイコンだけの場合は、aria-label で何の説明かを伝える（例：「送料についての説明」） - フェードは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。