CSSだけで作るマウスホバーでポップするバルーン・ツールチップのデザイン集

CSSCSSデザイン

リンク先の説明書きなどに使われるCSSだけで作るマウスホバー時にポップアップするバルーンポップアップ・ツールチップのデザイン集です。

共通HTML

紹介しているサンプルCSSの共通部分です。

HTML

<ul>
  <li>MENU1<span class="tooltip blue">MENU1</span></li>
  <li>MENU2<span class="tooltip red">MENU2</span></li>
  <li>MENU3<span class="tooltip green">MENU3</span></li>
  <li>MENU1<span class="tooltip brown">MENU1</span></li>
  <li>MENU2<span class="tooltip black">MENU2</span></li>
  <li>MENU3<span class="tooltip gray">MENU3</span></li>
</ul>

シンプルな吹き出しパターン(上)

シンプルな吹き出しパターンです。

動作サンプル

See the Pen CSS Balloon Popup list by yochans (@yochans) on CodePen.

サンプルコード

CSS

li{
  position: relative;
  display:inline-block;
  padding: 10px;
}

.tooltip{
  position: absolute;
  bottom: 3rem;
  left: 0px;
  padding: 6px 10px;
  background: #01579B;
  color:#FFF;
  font-size:0.8rem;
  border-radius:10px;
  transition: 0.5s;
  opacity:0;
}

.tooltip:after {
content: "";
position: absolute;
top: 100%;
left: 16px;
border: 5px solid transparent;
border-top: 14px solid #01579B;
}

li:hover .tooltip{
  opacity:1;
}

コードの説明

バルーン部分のopacity(透過度)を初期値で0、マウスホバー時に1に変更しています。

バルーン部分はposition: absolute;を指定して位置を調節します。

リストを横並びではなく改行して表示する場合はliのdisplay:inline-block;が不要です。

※サンプルでは余白を付けています、また色違い用のコードもCodePen上でご確認下さい。

シンプルな吹き出しパターン(右)

右側にポップするシンプルな吹き出しパターンです。

動作サンプル

See the Pen CSS Tooltip pattern right and normal by yochans (@yochans) on CodePen.

サンプルコード

CSS

li{
  position: relative;
  padding: 5px;
}

.tooltip{
  position: relative;
  top: -1%;
  left :2%;
  padding: 6px 10px;
  background: #0091EA;
  color:#FFF;
  font-size:0.8rem;
  border-radius:10px;
  transition: 0.5s;
  opacity:0;
}

.tooltip:after{
content: "";
position: absolute;
top: 10px;
right: 100%;
border: 5px solid transparent;
border-right: 12px solid #0091EA;
}

li:hover .tooltip{
  opacity:1;
}

コードの説明

バルーン部分のopacity(透過度)を初期値で0、マウスホバー時に1に変更しています。

バルーン部分はposition: absolute;を指定して位置を調節します。

リストを横並びではなく改行して表示する場合はliのdisplay:inline-block;が不要です。

※サンプルでは余白を付けています、また色違い用のコードもCodePen上でご確認下さい。

影付き吹き出しパターン(上)

影付きの吹き出しパターンです。

動作サンプル

See the Pen CSS Balloon Popup list shadow by yochans (@yochans) on CodePen.

サンプルコード

CSS

li{
  position: relative;
  display:inline-block;
  padding: 10px;
}

.tooltip{
  position: absolute;
  bottom: 3rem;
  left: 0px;
  padding: 6px 10px;
  background: #01579B;
  color:#FFF;
  font-size:0.8rem;
  border-radius:10px;
  transition: 0.5s;
  opacity:0;
  filter: drop-shadow(5px 4px 2px rgba(0,0,0,0.5));
}

.tooltip:after {
content: "";
position: absolute;
top: 100%;
left: 16px;
border: 5px solid transparent;
border-top: 14px solid #01579B;
}

li:hover .tooltip{
  opacity:1;
}

コードの説明

影の部分は、.tooltipセレクタに対して、filter: drop-shadow()を指定しています。

※サンプルでは余白を付けています、また色違い用のコードもCodePen上でご確認下さい。

影付き吹き出しパターン(右)

右側にポップする影付き吹き出しパターンです。

動作サンプル

See the Pen CSS Balloon Tooltip right and shadow by yochans (@yochans) on CodePen.

サンプルコード

CSS

li{
  position: relative;
  padding: 5px;
}

.tooltip{
  position: relative;
  top: -1%;
  left :2%;
  padding: 6px 10px;
  background: #0091EA;
  color:#FFF;
  font-size:0.8rem;
  border-radius:10px;
  transition: 0.5s;
  opacity:0;
  filter: drop-shadow(5px 4px 2px rgba(0,0,0,0.5));
}

.tooltip:after  {
content: "";
position: absolute;
top: 10px;
right: 100%;
border: 5px solid transparent;
border-right: 12px solid #0091EA;
}

li:hover .tooltip{
  opacity:1;
}

コードの説明

右側バルーンの位置は.tooltipセレクタに設定しているleftの数値で調整します。

影の部分は、.tooltipセレクタに対して、filter: drop-shadow()を指定しています。

※サンプルでは余白を付けています、また色違い用のコードもCodePen上でご確認下さい。

ストライプ柄チップパターン

ストライプ柄のチップパターンです。

動作サンプル

See the Pen CSS Balloon Popup list stripe by yochans (@yochans) on CodePen.

サンプルコード

CSS

li{
  position: relative;
  display:inline-block;
  padding: 10px;
}

.tooltip{
  position: absolute;
  bottom: 2.5rem;
  left: 6px;
  padding: 6px 10px;
  background: #01579B;
  color:#FFF;
  font-size:0.8rem;
  border-radius:10px;
  transition: 0.5s;
  opacity:0;
  filter: drop-shadow(5px 4px 2px rgba(0,0,0,0.5));
}

li:hover .tooltip{
  opacity:1;
}

コードの説明

影の部分は、.balloonセレクタに対して、filter: drop-shadow()を指定しています。

※サンプルでは余白を付けています、また色違い用のコードもCodePen上でご確認下さい。

CSSCSSデザイン

Posted by Yousuke.U