1 NOTES
マウスホバーで表示するシンプルなツールチップのサンプル集 2019-08-27 CSS CSS デザイン サンプル集リンク先の説明書きなどに使われるツールチップをCSSだけで実装したパターンサンプル集です。マウスホバー時にポップアップするバルーンポップアップ・ツールチップなどなど。
目次
- 共通HTML
- シンプルな吹き出しパターン（上）
- シンプルな吹き出しパターン（右）
- 影付き吹き出しパターン（上）
- 影付き吹き出しパターン（右）
- ストライプ柄チップパターン
共通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上でご確認下さい。
Yousuke.U