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

2026年2月23日2026年2月24日

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

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

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

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

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

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

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

見出し
ボタン
ボックス
ローディング
リスト
吹き出し
アコーディオンメニュー
検索フォーム
セレクトボックス
パンくずリスト
テキストボックス
ツールチップ
Q&Aリスト
引用ボックス
レーダーチャート
「READ MORE」ボタン
タブボタン
トグルボタン
チェックボックス
フッター
付箋
ページネーション
円グラフ
ラジオボタン
目次
棒グラフ
モーダルウィンドウ
タイムライン（ステップバー）

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

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

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

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

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

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

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

調整項目一覧

背景色
文字色

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

上向き

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コードを記載しています。

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

調整項目一覧

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

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

クエスチョンマーク

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: '';
}