Raja Kode - HINT.css adalah library yang dibuat hanya dengan CSS/CSS3 yang memungkinkan kamu untuk membuat sebuah tooltips/hints yang dapat dikostumisasi dengan mudah.
Fitur Hint.css:
- Ringan dan mudah digunakan
- Animasinya terbuat dari CSS3 transitions dan transforms.
- Dapat di kostumisasi full via CSS
- 4 directions: kiri, kanan, atas dan bawah.
- 8 tipe tampilan tooltip/hint: error, warning, info, success, always, rounded, no-animate, dan bounce.
Cara Memasang Hint.css
1. Download dan upload file hint.css diatas, lalu taruh diatas kode head.
<link rel="stylesheet" href="hint.css">
2. Tambahkan link ke html elemen, Gunakan atribut ‘data-hint’ untuk menampilkan tooltip. gunakan atribut class untuk menentukan arah tooltip dan untuk modifikasi lainnya.
<a class="hint--top hint--error" data-hint="ini adalah tooltip error">Hover me</a>
3. Kamu juga bisa menggunakan atribut 'aria-label'
<a class="hint--top hint--error" aria-label="This is an error tooltip">Hover me</a>
Merubah tema tooltip:
- hint–error
- hint–info
- hint–warning
- hint–success
Mengganti ukuran tooltip.
- hint–small
- hint–medium
- hint–large
CSS lainnya untuk mempercantik tooltip :
hint–always: selalu tampilkan
hint–rounded: rounded corner
hint–no-animate: tanpa animasi
hint–bounce: dengan animasi memantul
Changelog:
v2.7.0 (10/02/2021)
- Add new class to hide arrow – hint–no-arrow
06/13/2020
- v2.6.0
11/27/2018
- v2.5.1