コピペで使えるツールチップ20個まとめ（マウスを乗せると出る補足説明）

専門用語や、入力欄の補足説明を本文に全部書くと、文章が長くなって読みにくくなってしまいます。そんな時に便利なのがツールチップです。

この記事では、コピペするだけで使えるツールチップ（マウスを乗せると出る小さな説明の吹き出し）を20個まとめました。
定番の黒い吹き出しから、「?」アイコン、ボタンの補足、いつも表示されている吹き出しまで、場面ごとに使い分けられる種類を用意しています。

どれもHTMLとCSSだけで動くので、JavaScriptは必要ありません。
これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

ツールチップって、どうやって見るの？

パソコンなら、点線の付いた言葉やアイコンにマウスを乗せると出てくるんだ。スマホではタップすると表示されるよ。それぞれの「実際の見た目」で試してみてね。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、ツールチップを付けたい場所に貼り付けます。

説明したい言葉は外側のspanタグの中、表示される説明文は「〇〇-text」のspanタグの中に書き込みます。
外側のspanタグに付いている「tabindex=”0″」は、スマホのタップやキーボード操作でも表示できるようにするためのものなので、消さずに残しておいてください。

01. 上に出る黒いツールチップ

用語の上に黒い吹き出しで説明が出る、もっとも定番のタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip01-wrap">ここに<span class="kts-tip01" tabindex="0">SEO<span class="kts-tip01-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip01-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip01 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip01-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #111827; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip01:hover .kts-tip01-text, .kts-tip01:focus .kts-tip01-text { visibility: visible; opacity: 1;  }
.kts-tip01-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #111827; }

02. 下に出るタイプ

ページ上部のメニューなど、上に余白がない場所で使いやすいタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip02-wrap">ここに<span class="kts-tip02" tabindex="0">SEO<span class="kts-tip02-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip02-wrap { font-family: sans-serif; padding-top: 0; }
.kts-tip02 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip02-text { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #374151; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip02:hover .kts-tip02-text, .kts-tip02:focus .kts-tip02-text { visibility: visible; opacity: 1;  }
.kts-tip02-text::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #374151; }

03. 右に出るタイプ

文字の右側に説明を出す、横に余白がある場所向けのタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip03-wrap">ここに<span class="kts-tip03" tabindex="0">SEO<span class="kts-tip03-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip03-wrap { font-family: sans-serif; padding-top: 0; }
.kts-tip03 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip03-text { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #1F2937; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip03:hover .kts-tip03-text, .kts-tip03:focus .kts-tip03-text { visibility: visible; opacity: 1;  }
.kts-tip03-text::after { content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right-color: #1F2937; }

04. 左に出るタイプ

文字の左側に説明を出す、ページの右端で使いやすいタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip04-wrap" style="text-align: right;">ここに<span class="kts-tip04" tabindex="0">SEO<span class="kts-tip04-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip04-wrap { font-family: sans-serif; padding-top: 0; }
.kts-tip04 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip04-text { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #1F2937; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip04:hover .kts-tip04-text, .kts-tip04:focus .kts-tip04-text { visibility: visible; opacity: 1;  }
.kts-tip04-text::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #1F2937; }

05. 白地に影のタイプ

白い背景にふんわりとした影を付けた、明るいサイトになじむタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip05-wrap">ここに<span class="kts-tip05" tabindex="0">SEO<span class="kts-tip05-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip05-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip05 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip05-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 8px 12px; background: #fff; color: #374151; font-size: 12px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.kts-tip05:hover .kts-tip05-text, .kts-tip05:focus .kts-tip05-text { visibility: visible; opacity: 1;  }
.kts-tip05-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; }

06. 色付きのツールチップ

サイトのテーマカラーに合わせて、色を付けたタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip06-wrap">ここに<span class="kts-tip06" tabindex="0">SEO<span class="kts-tip06-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip06-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip06 { position: relative; display: inline-block; cursor: help; color: #2563EB; border-bottom: 1px dotted #2563EB; }
.kts-tip06-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #2563EB; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip06:hover .kts-tip06-text, .kts-tip06:focus .kts-tip06-text { visibility: visible; opacity: 1;  }
.kts-tip06-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #2563EB; }

07. 「?」アイコンで出るタイプ

小さな「?」マークに説明を仕込む、入力フォームの補足などで便利なタイプです。

実際の見た目

パスワード ?8文字以上の英数字で入力してください

HTMLコード

<p class="kts-tip07-wrap">パスワード <span class="kts-tip07" tabindex="0">?<span class="kts-tip07-text">8文字以上の英数字で入力してください</span></span></p>

CSSコード

.kts-tip07-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip07 { position: relative; display: inline-block; cursor: help; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; background: #9CA3AF; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.kts-tip07-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #374151; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip07:hover .kts-tip07-text, .kts-tip07:focus .kts-tip07-text { visibility: visible; opacity: 1;  }
.kts-tip07-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #374151; }

08. 用語に下線を引いたタイプ

専門用語に波線を引いて、「ここに説明があるよ」と気づかせるタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip08-wrap">ここに<span class="kts-tip08" tabindex="0">SEO<span class="kts-tip08-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip08-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip08 { position: relative; display: inline-block; cursor: help; text-decoration: underline wavy #F59E0B; text-underline-offset: 4px; }
.kts-tip08-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #92400E; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip08:hover .kts-tip08-text, .kts-tip08:focus .kts-tip08-text { visibility: visible; opacity: 1;  }
.kts-tip08-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #92400E; }

09. ふわっと上に浮かぶタイプ

説明が少し下から浮かび上がるように表示される、動きのあるタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip09-wrap">ここに<span class="kts-tip09" tabindex="0">SEO<span class="kts-tip09-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip09-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip09 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip09-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .3s, margin-bottom .3s; margin-bottom: -6px; padding: 6px 10px; background: #7C3AED; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip09:hover .kts-tip09-text, .kts-tip09:focus .kts-tip09-text { visibility: visible; opacity: 1; margin-bottom: 0; }
.kts-tip09-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #7C3AED; }

10. 長い説明が入るタイプ

説明文を複数行で表示できる、少し詳しく伝えたい時のタイプです。

実際の見た目

ここにインボイス制度消費税の仕入税額控除を受けるために、登録番号などを記載した請求書のやり取りを求める制度のことです。の説明が入ります。

HTMLコード

<p class="kts-tip10-wrap">ここに<span class="kts-tip10" tabindex="0">インボイス制度<span class="kts-tip10-text">消費税の仕入税額控除を受けるために、登録番号などを記載した請求書のやり取りを求める制度のことです。</span></span>の説明が入ります。</p>

CSSコード

.kts-tip10-wrap { font-family: sans-serif; padding-top: 100px; }
.kts-tip10 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip10-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; width: 240px; padding: 10px 12px; background: #111827; color: #fff; font-size: 12px; line-height: 1.6; border-radius: 6px; white-space: normal; }
.kts-tip10:hover .kts-tip10-text, .kts-tip10:focus .kts-tip10-text { visibility: visible; opacity: 1;  }
.kts-tip10-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #111827; }

11. タイトル付きのカード型

見出しと本文を分けて表示する、情報量の多い説明向けのタイプです。

実際の見た目

この商品はオーガニックオーガニックとは農薬や化学肥料に頼らずに育てた原料を使っていることを指します。素材を使用しています。

HTMLコード

<p class="kts-tip11-wrap">この商品は<span class="kts-tip11" tabindex="0">オーガニック<span class="kts-tip11-text"><strong>オーガニックとは</strong>農薬や化学肥料に頼らずに育てた原料を使っていることを指します。</span></span>素材を使用しています。</p>

CSSコード

.kts-tip11-wrap { font-family: sans-serif; padding-top: 120px; }
.kts-tip11 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip11-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; width: 220px; padding: 12px 14px; background: #fff; color: #4B5563; font-size: 12px; line-height: 1.6; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); white-space: normal; }
.kts-tip11:hover .kts-tip11-text, .kts-tip11:focus .kts-tip11-text { visibility: visible; opacity: 1;  }
.kts-tip11-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; }
.kts-tip11-text strong { display: block; margin-bottom: 4px; color: #111827; font-size: 13px; }

12. 角ばったシャープなタイプ

角を丸めない、かっちりとした印象のタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip12-wrap">ここに<span class="kts-tip12" tabindex="0">SEO<span class="kts-tip12-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip12-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip12 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip12-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 12px; background: #000; color: #fff; font-size: 12px; letter-spacing: .05em; white-space: nowrap; }
.kts-tip12:hover .kts-tip12-text, .kts-tip12:focus .kts-tip12-text { visibility: visible; opacity: 1;  }
.kts-tip12-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #000; }

13. グラデーションのタイプ

背景にグラデーションをかけた、華やかなタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip13-wrap">ここに<span class="kts-tip13" tabindex="0">SEO<span class="kts-tip13-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip13-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip13 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip13-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 12px; background: linear-gradient(135deg, #F97316, #EC4899); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.kts-tip13:hover .kts-tip13-text, .kts-tip13:focus .kts-tip13-text { visibility: visible; opacity: 1;  }
.kts-tip13-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #F97316; }

14. 枠線だけのタイプ

白地に枠線を引いた、控えめで上品なタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip14-wrap">ここに<span class="kts-tip14" tabindex="0">SEO<span class="kts-tip14-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip14-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip14 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip14-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 12px; background: #fff; color: #065F46; font-size: 12px; border: 1px solid #10B981; border-radius: 4px; white-space: nowrap; }
.kts-tip14:hover .kts-tip14-text, .kts-tip14:focus .kts-tip14-text { visibility: visible; opacity: 1;  }
.kts-tip14-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #10B981; }

15. ボタンの上に出るタイプ

ボタンにマウスを乗せると、押すと何が起きるかを伝えるタイプです。

実際の見た目

HTMLコード

<p class="kts-tip15-wrap"><button type="button" class="kts-tip15">保存する<span class="kts-tip15-text">入力内容を下書きとして保存します</span></button></p>

CSSコード

.kts-tip15-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip15 { position: relative; display: inline-block; cursor: help; padding: 10px 22px; border: 0; border-radius: 6px; background: #2563EB; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.kts-tip15-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #1F2937; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip15:hover .kts-tip15-text, .kts-tip15:focus .kts-tip15-text { visibility: visible; opacity: 1;  }
.kts-tip15-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1F2937; }

16. いつも表示されている吹き出し

マウスを乗せなくても最初から見えている、注目させたい時のタイプです。

実際の見た目

申し込む今なら10%オフ！

HTMLコード

<p class="kts-tip16-wrap"><span class="kts-tip16">申し込む<span class="kts-tip16-text">今なら10%オフ！</span></span></p>

CSSコード

.kts-tip16-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip16 { position: relative; display: inline-block; cursor: help; padding: 10px 26px; border-radius: 6px; background: #DC2626; color: #fff; font-weight: 700; cursor: pointer; }
.kts-tip16-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 4px 10px; background: #FACC15; color: #713F12; font-size: 12px; font-weight: 700; border-radius: 4px; white-space: nowrap; visibility: visible; opacity: 1; }
.kts-tip16:hover .kts-tip16-text, .kts-tip16:focus .kts-tip16-text { visibility: visible; opacity: 1;  }
.kts-tip16-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #FACC15; }

17. 注意を伝える赤いタイプ

「取り消せません」など、注意してほしい内容を赤で伝えるタイプです。

実際の見た目

ここに削除一度削除すると元に戻せませんの説明が入ります。

HTMLコード

<p class="kts-tip17-wrap">ここに<span class="kts-tip17" tabindex="0">削除<span class="kts-tip17-text">一度削除すると元に戻せません</span></span>の説明が入ります。</p>

CSSコード

.kts-tip17-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip17 { position: relative; display: inline-block; cursor: help; color: #DC2626; font-weight: 700; border-bottom: 1px dotted #DC2626; }
.kts-tip17-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #DC2626; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip17:hover .kts-tip17-text, .kts-tip17:focus .kts-tip17-text { visibility: visible; opacity: 1;  }
.kts-tip17-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #DC2626; }

18. ヒントを伝える黄色いタイプ

「💡」マーク付きで、ちょっとしたコツを伝えるタイプです。

実際の見た目

ここにショートカット💡 Ctrl＋Sでも保存できますの説明が入ります。

HTMLコード

<p class="kts-tip18-wrap">ここに<span class="kts-tip18" tabindex="0">ショートカット<span class="kts-tip18-text">💡 Ctrl＋Sでも保存できます</span></span>の説明が入ります。</p>

CSSコード

.kts-tip18-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip18 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip18-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 12px; background: #FEF9C3; color: #713F12; font-size: 12px; border: 1px solid #FDE047; border-radius: 6px; white-space: nowrap; }
.kts-tip18:hover .kts-tip18-text, .kts-tip18:focus .kts-tip18-text { visibility: visible; opacity: 1;  }
.kts-tip18-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #FDE047; }

19. 「i」マークの情報アイコン

丸い「i」マークに補足情報を仕込む、落ち着いた印象のタイプです。

実際の見た目

送料 i5,000円以上のご注文で送料無料

HTMLコード

<p class="kts-tip19-wrap">送料 <span class="kts-tip19" tabindex="0">i<span class="kts-tip19-text">5,000円以上のご注文で送料無料</span></span></p>

CSSコード

.kts-tip19-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip19 { position: relative; display: inline-block; cursor: help; width: 18px; height: 18px; line-height: 16px; border: 1px solid #0EA5E9; border-radius: 50%; color: #0EA5E9; font-size: 12px; font-weight: 700; font-style: italic; text-align: center; }
.kts-tip19-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #0369A1; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip19:hover .kts-tip19-text, .kts-tip19:focus .kts-tip19-text { visibility: visible; opacity: 1;  }
.kts-tip19-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0369A1; }

20. ぽよんと弾むタイプ

表示される時に小さく弾む、かわいらしい動きのタイプです。

実際の見た目

ここにSEO検索結果で上位に表示されるための工夫のことの説明が入ります。

HTMLコード

<p class="kts-tip20-wrap">ここに<span class="kts-tip20" tabindex="0">SEO<span class="kts-tip20-text">検索結果で上位に表示されるための工夫のこと</span></span>の説明が入ります。</p>

CSSコード

.kts-tip20-wrap { font-family: sans-serif; padding-top: 56px; }
.kts-tip20 { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #6B7280; }
.kts-tip20-text { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; visibility: hidden; opacity: 0; font-weight: normal; font-style: normal; transition: opacity .2s; padding: 6px 10px; background: #DB2777; color: #fff; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.kts-tip20:hover .kts-tip20-text, .kts-tip20:focus .kts-tip20-text { visibility: visible; opacity: 1; animation: kts-tip20-pop .35s ease; }
.kts-tip20-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #DB2777; }
@keyframes kts-tip20-pop { 0% { transform: translateX(-50%) scale(.6); } 70% { transform: translateX(-50%) scale(1.08); } 100% { transform: translateX(-50%) scale(1); } }

カスタマイズの小ワザ

  • サンプルの「〇〇-wrap」は、見た目の確認用に上の余白を作っているだけです。実際に使う時は、外側のspanタグ（ツールチップ本体）だけを文章の中に入れれば動きます。
  • スマホではマウスを乗せられないため、tabindex=”0″を付けてタップで表示できるようにしています。
  • ページの端で吹き出しが見切れる時は、02〜04番のように出る方向を変えてください。
  • 説明が長い時は、10番のようにwidthを指定して、折り返して表示させてください。
  • 大事な情報はツールチップに隠さず、本文に書くのがおすすめです。ツールチップは「知らない人だけが見る補足」に使いましょう。

まとめ｜早見表

使いたい場面該当するツールチップ
定番の用語説明01, 06, 08
出る方向を変えたい02, 03, 04
明るく上品に見せたい05, 14
入力フォームの補足07, 19
長い説明を入れたい10, 11
かっちり・華やか12, 13
ボタンの補足15
常に目立たせたい16
注意・ヒント17, 18
動きを付けたい09, 20

難しい言葉に説明を付けられるから、読む人にやさしいね！

そうなんだ。ただ、ツールチップは気づかれないこともあるから、大事なことは本文に書いておこうね。「知らない人だけが見る補足」として使うのがコツだよ。

20個のツールチップは、HTMLとCSSだけで動き、JavaScriptは不要である。tabindex="0"を付けるとスマホのタップでも表示でき、出る方向や説明の長さに応じて使い分けられる。

関連記事

  1. コピペで使えるハンバーガーメニュー20個まとめ（スマホ用の三本線メニュー）

  2. コピペで使えるアコーディオン20個まとめ（よくある質問・FAQの折りたたみに）

  3. レスポンシブデザインとは？スマホ対応で失敗しやすいポイント

  4. 無料で使えるGoogleサイトとは？使い方も紹介！

  5. ショートカットキー一覧318選｜Windows・Excel・Word・PowerPoint対応

  6. コピペで使えるタイムライン20個まとめ（沿革・スケジュール・手順の流れ）

  7. コピペで使えるカードデザイン20個まとめ（商品・プロフィール・料金プラン）

  8. スワイプLPって何？縦長LPとの違いからメリット・作り方まで解説

  9. コピペで使える画像ホバーエフェクト20個まとめ（マウスを乗せると動く画像）