今回の課題

「？」にホバーすると説明せつめいが表示ひょうじされるツールチップを作つくろう！

📖 解説を見る

💬 ツールチップってなに？

マウスを乗のせたときに小ちいさな説明せつめい文ぶんが表示ひょうじされるUIです。
CSSだけで作つくれます！

✏️ 仕組しくみ：

<span class="tooltip">？
  <span class="tip">ヒントです！</span>
</span>

.tip { display: none; }
.tooltip:hover .tip { display: block; }

⚠️ ポイント：
・普段ふだんは display: none で隠かくす
・:hover のとき display: block で表示ひょうじする
・position: absolute で上うえに浮うかせる

ヒントを見る

.tooltip:hover .tip { display: block; position: absolute; } と書こう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: ツールチップを右側みぎがわに表示ひょうじされるようにしよう！（left: 130%）（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: ツールチップにtransitionでフェードふぇーどイン効果こうかをつけよう！（opacityを使つかう）（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: 3つの異ことなる言葉ことばにそれぞれツールチップをつけよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト23：ツールチップを作ろう