Membuat tooltip hover sederhana untuk blogger dengan hanya menggunakan CSS

Saat ini tooltip sudah sangat sering kita jumpai pada situs-situs ternama di internet untuk memberikan penjelasan pada sebuah link atau menampilkan keterangan bantuan pada sebuah text yang dianggap penting ketika pointer mouse mengarah padanya.

Bagi kamu yang ingin tahu bagaimana sih contoh tooltip yang akan kita buat nantinya, silahkan klik gambar di bawah untuk lihat demonya.

Menambahkan CSS
Langkah paling awal untuk membuatnya adalah terlebih dahulu menambahkan CSS ke template kamu. Berikut langkah-langkahnya:

Langkah 1: Klik Template, Edit Template.

Langkah 2: Kemudian cari kode ]]></b:skin>

Langkah 3: Copy dan paste kode CSS dibawah tepat di atas kode ]]></b:skin>.

.tooltip

{

position: relative;

background: #eaeaea;

cursor: help;

display: inline-block;

text-decoration: none;

color: #222;

outline: none;

}

.tooltip span

{

visibility: hidden;

position: absolute;

bottom: 30px;

left: 50%;

z-index: 999;

width: 230px;

margin-left: -127px;

padding: 10px;

border: 2px solid #ccc;

opacity: .9;

background-color: #ddd;

background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));

background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));

background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));

background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));

background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));

-moz-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;

box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;

text-shadow: 0 1px 0 rgba(255,255,255,.4);

}

.tooltip:hover

{

border: 0; /* IE6 fix */

}

.tooltip:hover span

{

visibility: visible;

}

.tooltip span:before,

.tooltip span:after

{

content: "";

position: absolute;

z-index: 1000;

bottom: -7px;

left: 50%;

margin-left: -8px;

border-top: 8px solid #ddd;

border-left: 8px solid transparent;

border-right: 8px solid transparent;

border-bottom: 0;

}

.tooltip span:before

{

border-top-color: #ccc;

bottom: -8px;

}

Catatan:
Bagian yang saya tandai dengan warna merah diatas bisa kamu ganti dengan kode warna lain yang kamu inginkan.

Langkah 4: Simpan perubahan dengan mengklik tombol Save Template.

Menambahkan tooltip pada text yang kamu inginkan.
Ketika kamu menulis sebuah artikel, dan ingin menambahkan tooltip pada beberapa text, lakukan seperti cara berikut:

<a href="#" class="tooltip">

Ini adalah Text yang ingin dipasangkan tooltip

<span>Ini adalah text yang muncul pada tooltip ketika pointer mouse diarahkan pada text</span>

</a>

Pada halaman demo diatas, saya menambahkannya seperti ini:

<a href="#" class="tooltip">Phasellus at adipiscing felis <span>Ini adalah keterangan dari tooltip. Muncul setelah pointer mouse kamu arahkan pada text</span></a>

Nah, silahkan di coba, tuliskan komentar kamu jika ada yang ingin di tanyakan.