Cara Menerapkan Tooltip Pada CSS
Hallo sobat, apa kabar semuanya. Berjumpa lagi dengan saya di panduan Source Code Aplikasi, 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 membangun link, dimana link ini sebelum di klik tooltip akan tampil bagi memberikan informasi kepada user. Tooltip yang akan kita bikin murni menggunakan CSS bukan Javascript ataupun Jquery, oke mari kita lihat demo gambarnya di bawah ini
Nah seperti yang teman-teman lihat di gambar di atas ini, saya membangun tombol atau link dengan value “Lanjutkan” kemudian di dikala cursor di arahkan di link tooltip akan tampil. Bagus seketika saja kita praktekkan Cara Menerapkan Tooltip Pada CSS, seperti biasanya siapkan text editornya kemudian ketikkan script seperti gambar di bawah ini
Lalu save dengan index.html dan tambahkan css nya di pada 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>
Seandainya telah, save dan refresh di browsernya. Karenanya tooltip yang kita bikin berhasil di tampilkan
Gambar di atas ini ialah 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 pada hover .tooltiptext, karenanya akan tampil di dikala cursor di arahkan di link. Amat gampang bukan, teman-teman pun dapat mengaplikasikan ini di pada situs kalian. Biasanya tooltip bermanfaat bagi memberikan notifikasi kepada user agar di dikala di klik user tahu informasi ketika link telah di klik. Bagus sekianlah dulu di artikel mengenai Cara Menerapkan Tooltip Pada CSS, kita berjumpa lagi di panduan berikutnya. Semoga Bermanfaat, Hingga Jumpa dan Terima Kasih 🙂
Sumber https://kursuswebsite.org
