Membuat Tooltip Murni CSS

Mad Trik - Setelah menjelajahi seisi internet akhirnya saya bisa mendapatkan beberapa ide untuk tulisan saya kali ini dan juga selanjutnya nanti. Meskipun tidak banyak mungkin artikel kedepanya nanti bermanfaat buat membangun blog kamu.

Dan seperti judul artikel kali ini saya akan membuat tutorial tentang cara membuat tooltip yang sepenuhnya murni dibuat oleh Cascading Style Sheet a.k.a CSS. Tutorial ini saya dapat ketika bermain di situs CSSDeck, situs atau bisa dibilang "taman bermainnya" para kodingers *halah*. Ketika melihat-lihat kebetulan saya melihat suatu Tooltip murni CSS yang pastinya tanpa embel-embel Javascript yang menurut saya mungkin bisa diserap ilmunya bagi para pemula ataupun yang sudah ahli dalam bermain kode ini, nah kebetulan juga saya lagi kehabisan ide untuk menulis, jadi kenapa tidak.

Dan berikut ini adalah tutorialnya:

CSS

Untuk CSS-nya seperti biasa kode dibawah ditaruh di atas </style> ataupun ]]><b:skin/> :

.tooltip {
  color: #1f8b8a;
  border-bottom: thin dashed #1d7b77;
  position: relative;
  cursor: pointer;
  line-height: 2.5;
}

.tooltip:before,
.tooltip:after {
  display: block;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s;
  left: 50px;
  margin-bottom: -15px;
  transition: margin .2s;
  line-height: 1.3;
}

.tooltip:before {
  width: 190px;
  padding: 10px;
  box-sizing: border-box;
  bottom: 25px;
  font-size: .9em;
  text-align: center;
  margin-left: -50px;
  background: #00AFAF;
  content: attr(data-title);
  color: #fff;
}

.tooltip:after {
  content: "";
  border-top: 7px solid #00AFAF;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  bottom: 18px;
  margin-left: -40px;
}

.tooltip:hover:before,
.tooltip:hover:after {
  visibility: visible;
  opacity: 1;
  margin-bottom: 0px;
}

HTML

Dan untuk memanggil si tooltip ini, gunakan HTML dibawah ini ketika kamu sedang membuat sebuah postingan atau artikel:

<span class="tooltip" data-title="Text tooltipnya disini">
Text yang ingin ber-tooltip
</span>

Sekiranya sampai disini dulu pembahasan tentang tooltip yang murni CSS ini, jika ada kesulitan atau ada pertanyaan silahkan berkomentar dibawah ini.