title='' pada elemen menyerupai ini:<a href=' " title="Membuat Tooltip dengan CSS Pseudo-Element">CSS Pseudo-Element:Berikut ini ialah isyarat CSS untuk memproduksi tooltip dari atribut title:
*[title]:before { content:attr(title); position:absolute; z-index:10; width:auto; bottom:100%; left:0; margin-bottom:3px; background:#000; color:#fff; font-size:11px; font-weight:normal; text-shadow:none; padding:4px 10px 5px; opacity:0.8; filter:alpha(opacity=80); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; display:none; } *[title]:hover {position:relative;} *[title]:hover:before { display:block; }
Selektor *[title]:before akan menyeleksi semua elemen yang mengandung atribut title='' di dalamnya, lalu akan menyisipkan sebuah elemen palsu yang berisikan nilai dari atribut title='' tersebut (dalam hal ini, isyarat yang dimaksud ialah content:attr(title)). Namun, deklarasi display:none; akan menyembunyikan wujud elemen palsu tersebut, sampai pada kesudahannya pointer diletakkan di atas elemen yang mengandung atribut title='' tersebut, barulah elemen palsu akan ditampilkan (display:block;).
Untuk tingkatan lebih lanjut, CSS ini tolong-menolong juga sanggup dipakai untuk menampilkan isi dari atribut lain, contohnya href=''. Caranya cukup dengan mengganti semua selektor atribut title dan nilai content dengan href menyerupai ini:
*[href]:before { content:attr(href); position:absolute; z-index:10; width:auto; bottom:100%; left:0; margin-bottom:3px; background:#000; color:#fff; font-size:11px; font-weight:normal; text-shadow:none; padding:4px 10px 5px; opacity:0.8; filter:alpha(opacity=80); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; display:none; } *[href]:hover {position:relative;} *[href]:hover:before { display:block; }
Jika isyarat di atas yang diterapkan, maka tooltip yang ditampilkan ialah berupa alamat URL. Ini jikalau kau menghendaki alamat URL yang dimunculkan sebagai tooltip, bukannya nilai dari atribut title='' menyerupai pada umumnya.
Sumber https://www.dte.web.id/
