Cara Membuat Tooltip Dengan CSS

Cara Membuat Tooltip Dengan CSS - Tooltip adalah komponen user interface, dimana komponen ini dapat muncul ketika ada objek yang disentuh. Tooltip biasa nya berisikan bantuan ataupun informasi.

Cara Membuat Tooltip

Pertama anda buat dulu script html sebagai berikut

<div class="button">Sentuh Ini
    <div class="tooltip">
        Ini Merupakan tooltip yang dibuat menggunakan CSS
        <img src="3.png" />
    </div>
</div>

Selanjutnya Script CSS seperti dibawah ini

html {
    font-family:Arial, Helvetica, sans-serif;
}
body {
    background:#0C3;
}
.button {
    width:100px;
    text-align:center;
    color:#fff;
    background:#96F;
    border-radius:5px;
    padding:15px;
    font-weight:bold;
    margin:15% auto;
    position:relative;
}
.tooltip {
    position:absolute;
    top:-90px;
    right:0px;
    background:#fff;
    width:300px;
    padding:15px;
    border-radius:10px;
    color:#000;
    display:none;
}
.tooltip img{
    height:20px;
    position:absolute;
    bottom:-20px;
}
.button:hover .tooltip {
    display:block;
}

Penjelasan

• <div class="button"> tag ini yang akan penulis jadikan objek.
• <div class="tooltip"> Ini bagian tooltip yang akan muncul ketika objek disentuh.
• Pada .tooltip  terdapat properti display:none; , ini adalah kondisi saat tooltip semula, yang itu tidak tampil.
• Pada .button:hover .tooltip  terdapat properti display:block; , ini adalah kondisi objek disentuh yang mengubah properti display:none; menjadi  display:block;