【html&css】コピペで作る！吹き出し風のツールチップデザイン5選

2026年2月23日2026年4月5日

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

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

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

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

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

【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾

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

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

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

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

Code Stock

Code Stock | UIコピペサイト UIコピペサイト

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

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

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

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

実際のデザインプレビューと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: '';
}