【HTML/CSS】コピペ！吹き出し風ツールチップデザイン5選

Q: マウスを乗せた時に表示される吹き出しの「位置（上・下・左・右）」は変えられますか？

はい、変更可能です。 CSSのposition: absolute;と組み合わされているtop,bottom,left,rightの数値を調整することで、ツールチップが出現する方向や距離を自由にカスタマイズできます。

Q: ツールチップの吹き出しの中の文章を「改行」することはできますか？

HTMLのdata-tooltip属性などを使ってテキストを渡している場合、そのままでは改行できません。 改行が必要な長文を入れる場合は、擬似要素（::after）ではなく、HTML内に隠し要素の<span>タグなどを入れ込むデザインパターンを使用してください。

Q: 吹き出しの「しっぽ（三角形）」の大きさや色は変更できますか？

可能です。 CSS内のborder-widthの数値を変更するとしっぽの大きさが変わり、border-colorのカラーコードを変更するとしっぽの色が変わります。 必ず背景色と同じ色に設定してください。

2026年2月23日2026年6月13日

いつまで無駄なデザインに時間を費やしますか？自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能な吹き出し風のツールチップデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

また、ツールチップ作成にはdivタグをデザインすることになります。

divタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

HTMLのdivタグとは？横並び・左右分割の使い方とCSS装飾

もう無駄なレイアウトに凝るのやめたら？最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

おしゃれなフリー素材デザイン集

本サイトでは、ツールチップ以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock

テキストから出る吹き出し風ツールチップ

ここでは、以下のテキストから出る吹き出し風ツールチップデザイン例を記載しています。

テキストから出る吹き出し風ツールチップデザイン

上向き
下向き
左向き
右向き

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もツールチップページでは選択式でご用意しました。

調整項目一覧

背景色
文字色

ご興味があれば「ツールチップ一覧ページ」を一読ください。

Code Stock

TOOLTIP | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Text tooltip テキストから出るツールチップテキストの例ツールチップの例上向き▼ テキス…

上向き

HTMLコード表示

<div class="tooltip-1">
  <div>マウスホバーしてください</div>
  <span>ツールチップの例</span>
</div>

CSSコード表示

.tooltip-1 {
  display: inline-block;
  position: relative;
}

.tooltip-1 > div {
  cursor: pointer;
}

.tooltip-1 > span {
  display: flex;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  padding: .5em 1em;
  border-radius: 3px;
  background-color: #2589d0;
  color: #ffffff;
  font-size: .7em;
  white-space: nowrap;
  transition: opacity .3s;
}

.tooltip-1 > span::before {
  position: absolute;
  top: -6px;
  width: 9px;
  height: 6px;
  background-color: inherit;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  content: '';
}

.tooltip-1:hover > span {
  visibility: visible;
  opacity: 1;
}

下向き

HTMLコード表示

<div class="tooltip-2">
  <div>マウスホバーしてください</div>
  <span>ツールチップの例</span>
</div>

CSSコード表示

.tooltip-2 {
  display: inline-block;
  position: relative;
}

.tooltip-2 > div {
  cursor: pointer;
}

.tooltip-2 > span {
  display: flex;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  padding: .5em 1em;
  border-radius: 3px;
  background-color: #2589d0;
  color: #ffffff;
  font-size: .7em;
  white-space: nowrap;
  transition: opacity .3s;
}

.tooltip-2 > span::before {
  position: absolute;
  bottom: -6px;
  width: 9px;
  height: 6px;
  background-color: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
}

.tooltip-2:hover > span {
  visibility: visible;
  opacity: 1;
}

左向き

HTMLコード表示

<div class="tooltip-3">
  <div>マウスホバーしてください</div>
  <span>ツールチップの例</span>
</div>

CSSコード表示

.tooltip-3 {
  display: inline-block;
  position: relative;
}

.tooltip-3 > div {
  cursor: pointer;
}

.tooltip-3 > span {
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: calc(100% + 15px);
  transform: translateY(-50%);
  padding: .5em 1em;
  border-radius: 3px;
  background-color: #2589d0;
  color: #ffffff;
  font-size: .7em;
  white-space: nowrap;
  transition: opacity .3s;
}

.tooltip-3 > span::before {
  position: absolute;
  left: -6px;
  width: 6px;
  height: 9px;
  background-color: inherit;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  content: '';
}

.tooltip-3:hover > span {
  visibility: visible;
  opacity: 1;
}

右向き

HTMLコード表示

<div class="tooltip-4">
  <div>マウスホバーしてください</div>
  <span>ツールチップの例</span>
</div>

CSSコード表示

.tooltip-4 {
  display: inline-block;
  position: relative;
}

.tooltip-4 > div {
  cursor: pointer;
}

.tooltip-4 > span {
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 50%;
  right: calc(100% + 15px);
  transform: translateY(-50%);
  padding: .5em 1em;
  border-radius: 3px;
  background-color: #2589d0;
  color: #ffffff;
  font-size: .7em;
  white-space: nowrap;
  transition: opacity .3s;
}

.tooltip-4 > span::before {
  position: absolute;
  right: -6px;
  width: 6px;
  height: 9px;
  background-color: inherit;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: '';
}

.tooltip-4:hover > span {
  visibility: visible;
  opacity: 1;
}

アイコンから出る吹き出し風ツールチップ

ここでは、以下のアイコンから出る吹き出し風ツールチップデザイン例を記載しています。

アイコンから出る吹き出し風ツールチップデザイン

クエスチョンマーク

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もツールチップページでは選択式でご用意しました。

調整項目一覧

アイコンの色
吹き出しの背景色
アイコンの塗りつぶし

ご興味があれば「ツールチップ一覧ページ」を一読ください。

Code Stock

クエスチョンマーク

HTMLコード表示

<div class="tooltip-5">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z" fill="#d0d0d0"></path>
  </svg>
  <p>ツールチップの内容</p>
</div>

CSSコード表示

.tooltip-5 {
  display: inline-block;
  position: relative;
}

.tooltip-5 svg {
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

.tooltip-5 p {
  display: flex;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: -43px;
  left: 50%;
  transform: translateX(-50%);
  padding: .5em 1em;
  border-radius: 3px;
  background-color: #00000099;
  color: #fff;
  font-size: .7em;
  white-space: nowrap;
  transition: opacity .3s;
}

.tooltip-5:hover > p {
  visibility: visible;
  opacity: 1;
}

.tooltip-5 p::before {
  position: absolute;
  top: -6px;
  width: 9px;
  height: 6px;
  background-color: inherit;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  content: '';
}