#sample1 li { position:relative; } #sample1 li:hover { background: #deb3ba; } .sample1-tooltips { display: none; position: absolute; bottom: -2.8em; left: 0.3em; z-index: 9999; padding: 0.3em 0.5em; color: #FFFFFF; background: #c72439; border-radius: 0.5em; } .sample1-tooltips:after { width: 100%; content: ""; display: block; position: absolute; left: 0.5em; top: -8px; border-top:8px solid transpa
![CSSやJavaScriptでツールチップを表示させる方法まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7ff588947716db586984901cd59ee40c363a4b0/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Funguis.cre8or.jp%2Fwp-content%2Fuploads%2F2016%2F01%2Fpattern01c.jpg%3Ffit%3D1200%252C600%26ssl%3D1)