Cara Membuat dan Menggunakan ToolTip (CSS)

Pada postingan tutorial blogger kali ini adalah membuat Tooltip hanya dengan CSS.
Apa itu Tooltip ?
Tooltip merupakan sebuah tampilan teks ketika cursor diarahkan ke fitur atau item yang diberi tooltip, dan biasanya Tooltip digunakan pada sebuah website.

Tooltip kurang lebih fungsinya sama seperti title, yaitu menunjukan informasi tentang fitur atau item tersebut, tapi jika menggunakan Tooltip maka tampilan informasi fitur atau item tersebut jauh lebih menarik ketimbang menggunakan title. Dengan menggunakan Tooltip web kamu akan lebih terlihat lebih professional ketimbang web pada biasanya.

Biasanya untuk membuat Tooltip itu menggunakan Javascript ataupun Jquery, namun disini kita membuat Tooltip hanya dengan CSS aja, tanpa perlu menumpuk script diweb kamu. Untuk membuat Tooltip sederhana itu sangat mudah, nah jika kamu penasaran bagaimana cara membuat Tooltip, yuk ikuti tutorial dibawah ini hingga selesai.

Cara Membuat dan Menggunakan Tooltip Hanya Dengan CSS

1. Pertama, login dulu ke Blogger,
2. Kemudian, pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Lalu, copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin> atau diatas </style>,
   

   /* Tooltip With CSS By Anirocksite */
   [data-tooltip] {
     position: relative;
     z-index: 2;
     cursor: pointer;
   }
   [data-tooltip]:before,
   [data-tooltip]:after {
     visibility: hidden;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
     opacity: 0;
     pointer-events: none;
   }
   [data-tooltip]:before {
     position: absolute;
     bottom: 150%;
     left: 50%;
     margin-bottom: 5px;
     margin-left: -80px;
     padding: 7px;
     width: 160px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
     background-color: #000;
     background-color: hsla(0, 0%, 20%, 0.9);
     color: #fff;
     content: attr(data-tooltip);
     text-align: center;
     font-size: 14px;
     line-height: 1.2;
   }
   [data-tooltip]:after {
     position: absolute;
     bottom: 150%;
     left: 50%;
     margin-left: -5px;
     width: 0;
     border-top: 5px solid #000;
     border-top: 5px solid hsla(0, 0%, 20%, 0.9);
     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
     content: " ";
     font-size: 0;
     line-height: 0;
   }
   [data-tooltip]:hover:before,
   [data-tooltip]:hover:after {
     visibility: visible;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
     opacity: 1;
   }
   

4. Untuk cara menggunakan Tooltip gunakan perintah ini,data-tooltip='ISI DISINI',

   <!-- CONTOH PENGGUNAAN TOOLTIP -->
   <span data-tooltip='Anirock Site'>AnirockSite</span>

   Maka hasilnya akan seperti berikut ini (untuk melihat hasilnya cukup arahkan cursor), Anirock Site

Bagaimana menarik bukan ? dan jika kamu masih bertanya apa perbedaannya menggunakan title dan tooltip,   cukup arahkan cursor kamu ke Title dan Tooltip untuk melihat hasilnya. title  ~ | ~   Tooltip

Kamu dapat menerapkan Tooltip itu dimana saja, misalkan kamu menggunakannya di Navigasi menu web kamu, Label, atau item lainnya yang ada diweb kamu, sekian tutorial yang dapat saya bagikan, jika ada kekurangan pada Tooltip yang saya bagikan kamu kembangkan saja,  bagaimana sangat sederhana dan mudah bukan ?

Semoga Bermanfaat :D