cssオンリーでツールチップを作成する

デザイナよりの人はジェンガみたいなCSSだしプログラマよりの人はイケてない。

---

サンプルコード

---

See the Pen
tooltip by ninomae-makoto (@ninomae-makoto)
on CodePen.

---

HTML

---

<ul class="menu">
  <li><a href="#">home</a><div class="tip"></div></li>
  <li><a href="#">about</a><div class="tip"></div></li>
  <li><a href="#">info</a><div class="tip"></div></li>
</ul>

---

CSS

---

a
{
  text-decoration: none;
  color: #232323;   
  transition: color 0.3s ease;
}
a:hover
{
  color: tomato;
}
li {
  list-style-type: none;
}

.tip {
  display: inline;
  position: absolute;
  padding: 10px;
  font-size: 12px;
  line-height: 1.6em;
  color: #fff;
  border-radius: 5px;
  background: #777;
  transition: all .3s;
  opacity: 0;
}

.menu a:hover ~ .tip {
  opacity: 1;
}

.tip::after {
  content: "this is tooltip."
}

---

解説

---

.tip が入っているCSSが重要なポイントでそれ以外は直接関係がない。
.tip は主にデザインなど。

.menu a:hover ~ .tip でコンテンツ(リンク)がホバーされたときのツールチップのCSSを指定している。
idかclassを前に指定するほうが無難。
a:hover ~ .tip だけだと他に影響が出る可能性がある。
opacityを0から1にアニメーションさせることでふわっと浮き出るようになる。

::afterでツールチップのテキストを指定したほうがHTMLがスッキリする。
テキストを変える場合はHTMLに記述したほうが楽かもしれない。

---

参考

---

https://www.jungleocean.com/demo/tooltip-css/