Bagaimana Membuat dan Memasang Tooltip ::before dan ::after ?
Tutorial kali ini, karena banyaknya request dan pertanyaan, bagaimana cara membuat tulisan Klik ganda untuk seleksi pada tag pre di blog ini.
Apa itu tooltip ?
Tooltip adalah komponen grafis dalam user interface pengguna. Komponen akan muncul ketika pointer mouse diarahkan apda sebuah komponen. Tooltip dapat berisi bantuan maupun info lain yang terkait dengan komponen tersebut. Biasanya, saat link di hover/dituju oleh mouse, akan muncul tulisan teks informasi. Tetapi Tooltip pada dasarnya hanya akan muncul jika komponen/link terdapat atribut title .Cara ini memudahkan pengunjung untuk mengetahui fungsi komponen tanpa harus mencobanya terlebih dahulu dan tidak memenuhi tampilan utama aplikasi.
Oke sobat, langsung saja anda buka blog kamu:
1. Login ke akun blogger kamu.
#tooltip {
width:400px;
height:90px;
background:#c7430f;
color:#f5d5c9;
text-align:center;
margin:0 auto;
text-transform:uppercase;
font-family:Arial, sans-serif;
font-size:18px;
line-height:90px;
vertical-align: middle;
position:relative;
}
#tooltip::before {
content:"Ini Tooltip Lho";
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}
#tooltip::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}
#tooltip:hover::before, #tooltip:hover::after {
opacity:.5;
visibility:visible;
}
5. KLIK SAVE DAN SIMPAN
6. Langkah terakhir sobat hanya perlu menambahkan data-tooltip di bagian komponen html.
Contohnya pembuatan link pada navigasi blog: <a href="http://web.unmetered.id" data-tooltip="Teks yang akan muncul di tooltip">Beranda</a>
Tags: Memasang Tooltip, Membuat Tooltip valid HTML5 CSS3