Cara Menerapkan Tooltip Pada CSS dan fungsinya

Hallo sobat, apa kabar semuanya. Berjumpa lagi dengan saya pada tutorial Dumet School, di artikel kali ini kita akan belajar Cara Menerapkan Tooltip Pada CSS. Tooltip hampir sama dengan hover yang berbeda hanyalah cara menampilkannya saja. Latihan kali ini kita akan membuat link, dimana link ini sebelum di klik tooltip akan tampil untuk memberikan informasi kepada user. Tooltip yang akan kita buat murni menggunakan CSS bukan Javascript ataupun Jquery, oke mari kita lihat demo gambarnya di bawah ini

Nah seperti yang teman-teman lihat pada gambar di atas ini, saya membuat tombol atau link dengan value “Lanjutkan” kemudian pada saat cursor di arahkan pada link tooltip akan tampil. Baik langsung saja kita praktekkan Cara Menerapkan Tooltip Pada CSS, seperti biasa siapkan text editornya kemudian ketikkan script seperti gambar di bawah ini

Lalu save dengan index.html dan tambahkan css nya di dalam tag <head>

<style>
        body{text-align:center;}
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-size: 30px;
    background: green;
    padding: 5px 10px;
    color:white;
    border-radius: 5px;
    text-decoration: none;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 360px;
    background-color: #ffb974;
    color: #fff;
    text-align: center;
    padding: 25px 0;
    border-radius: 5px;

    /* Position the tooltip */
    position: absolute;
    top: 45px; 
    z-index: 1;
    left: 0;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

Jika sudah, save dan refresh pada browsernya. Maka tooltip yang kita buat berhasil di tampilkan

Gambar di atas ini adalah class yang di miliki oleh tag <span>

Kemudian diberikan visibility:hidden; dan .tooltiptext akan di sembunyikan, lalu akan ditampilkan menggunakan hover

Yang diberikan visibility:visible; di dalam hover .tooltiptext, maka akan tampil pada saat cursor di arahkan pada link. Sangat mudah bukan, teman-teman juga bisa menerapkan ini di dalam website kalian. Biasanya tooltip berguna untuk memberikan notifikasi kepada user agar pada saat di klik user tahu informasi ketika link sudah di klik. Baik sekian dulu pada artikel tentang Cara Menerapkan Tooltip Pada CSS, kita berjumpa lagi pada tutorial berikutnya. Semoga Bermanfaat, Sampai Jumpa dan Terima Kasih 🙂

Cara Menerapkan Tooltip Pada CSS

Kategori