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.

10 comments

  1. Berati tooltipnya ini lebih ringan yah. Bukannya kalau bawaan defaultnya sudah ada?

    ReplyDelete
    Replies
    1. ini cuman sekedar mempercantik tampilannya saja :D

      Delete
  2. yah kalau trik ini lumayan ringan dan tidak terlalu memberatkan loading...simple juga penerapannya ketika ingin mengunakan tooltip pada tulisan kita ya gan....ok terima kasih tutornya. salam sahabat blogger.

    ReplyDelete
  3. kalau hanya sekedar HTML dan CSS, bisa diterapkan juga di WP ya mas ?

    ReplyDelete
    Replies
    1. ya dicoba saja dulu om :D

      mungkin bisa :)

      Delete
  4. keren nich..., izin simpan ya sob, kapan-kapan bisa dicoba terapkan

    ReplyDelete
  5. Mantap mas.. Sama kayak yang di blog saya heheh

    ReplyDelete

Perlu diingat saya juga manusia, yang kadang punya salah, jika ada kesalahan pada artikel yang dibuat kamu bisa membantu saya untuk memperbaiki artikel tersebut. Dan kadang saya juga tidak bisa manjawab pertanyaan kamu.