CSS | マウスホバーで表示するシンプルなツールチップのサンプル集

2020-10-01CSS,CSS デザイン

マウスホバーで表示するシンプルなツールチップ

リンク先の説明書きなどに使われるツールチップをCSSだけで実装したパターンサンプル集です。
マウスホバー時にポップアップするバルーンポップアップ・ツールチップなどなど。

共通HTML

紹介しているCSSサンプルの共通HTMLです。
リスト要素に記述しており、ツールチップ部分はクラス名を「tooltip」としています。

<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.

ul {
	margin-top: 50px;
}

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.

ul {}

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.

ul {
	margin-top: 50px;
}

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.

ul {}

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.

ul {
	margin-top: 50px;
}

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上でご確認下さい。

2020-10-01CSS,CSS デザイン

Posted by Yousuke.U