Cara Menampilkan Link Title Hover Dengan Css

Untuk menentukan Atribut dari sebuah judul sebagai informasi tambahan tentang suatu elemen atau objek di sebut juga title

Dalam kasus ini title selalu menyertai link dimana pun, namun keberadaan title sebagai judul link url tidak kelihatan tapi ada.
Keberadaan title yang memang penting, maka disini kita akan tampilkan Informasi sebagai teks tooltip ketika mouse bergerak di atas element link.




Agar terlihat kita akan menggunakan elemen [title] buka tutup kurung sebagai sumber utama.
Lalu kita manfaatkan juga kode :before untuk sedikit mengubah dari posisinya, selain itu anda dapat menggunakan kode :after sesuai kreasi anda.

Position Absolute Sangat dibutuhkan agar Tooltip tidak mempengaruhi bagian lain, selengkapnya kode Bagaimana Membuat title link dengan efek Tooltip Hover sebagai berikut :

CSS CODE

<style>
/* Hover title */
[title] {
display: inline-block;
position: relative;
cursor: pointer;
}

[title]:hover::before {
content: attr(title);
position: absolute;
bottom: 100%;
left: 50%;
display: inline-block;
padding: 3px 6px;
border-radius: 2px;
background: #990000;
color: #fff;
text-transform: capitalize;
font-size: 12px;
font-family: sans-serif;
white-space: nowrap;
}

[title]:hover {
visibility: visible;
}
</style>

HTML CODE

<a href="https://seleckeh.blogspot.com" title="Preview Tooltip Hover">SENTUHLAH SAYA</a>

PREVIEW :

Hasil kerja diatas dapat ditampilkan Sebagai contoh SENTUHLAH SAYA untuk menampilkan title hover.

Selebihnya dari kode ini dapat anda kreasikan sendiri, seperti menambahkan efek buble, animation dan sebagainya.
Demikian mohon maaf atas kekurangan terima kasih atas kunjungan.

Lihat juga Membuat Dropdown Text Simple