Belajar CSS Part 16 Tooltips
Assalamualaikum Wr. Wb.
PENGERTIAN
Tooltip merupakan elemen yang ada di dalam CSS yang memiliki fungsi untuk memberikan informasi tambahan saat mouse berada di atas elemen. Jadi properti ini akan muncul dan memberikan informasi saata mouse berada di atas unsur.
Tooltip merupakan elemen yang ada di dalam CSS yang memiliki fungsi untuk memberikan informasi tambahan saat mouse berada di atas elemen. Jadi properti ini akan muncul dan memberikan informasi saata mouse berada di atas unsur.
LATAR BELAKANG
Mempelajari CSS lebih dalam. Dan menerapkannya pada kegiatan sehari-hari.
Mempelajari CSS lebih dalam. Dan menerapkannya pada kegiatan sehari-hari.
MAKSUD & TUJUAN
Memudahkan seseorang dalam memberikan informasi tambahan.
Memberikan informasi kepada seseorang lebih mudah dan cepat.
Memudahkan seseorang dalam memberikan informasi tambahan.
Memberikan informasi kepada seseorang lebih mudah dan cepat.
ALAT & BAHAN
- LAPTOP/PC
- Text Editor
- Browser
LANGKAH KERJA
Pada properti CSS tooltip ini memiliki berbagai cara unutk penggunaanya, disini saya akan menjelaskan satu persatu.
- Basic Tooltip
Pada dasarnyaa properti tooltip ini akan muncul saat mouse berada di atas sebuah elemen dari tooltip tersebut.
Contoh :
Untuk syntaknya bisa and lihat sendiri pada gambar di atas.
Hasilnya akan kelihatan saat mouse berada di atas teks yang mengandung attribute tooltip.
- Positioning Tooltips
Properti ini berfungsi untuk menentukan tempat atau posisi dari hasil tooltip tersebut. Maksudnya kita dapat mengatur posisi keluaran dari tooltip tersebut dengan properti ini.
Contoh :
Pada syntaks di atas saya memposisikan hasil dari tooltip berada di sebelah kanan. Contohnya bisa anda lihat sendiri
Hasil tooltip di atas ada di sebelah kanan elemen. Jika anda menginginkan posisi yang lain bisa anda ganti syntak pada CSSnya.
- Tooltip Arrows
Properti ini berfungsi memberikan efek panah pada tooltip.
Contoh :
Untuk syntaknya bisa anda lihat pada gambar di atas.
Hasilnya terlihat sedikit keren kan, hehe.
- Fade In Tooltips (Animation)
Properti ini berfungsi untuk memberikan efek animasi pada tooltip tadi, efek tersebut bisa ditambahkan dengan CSS3 Transition & opacity.
Contoh :
Untuk syntaknya anda bisa menambahlan transition & opacity pada elemen.
Untuk hasilnya bisa anda rasakan sendiri, hasilnya memiliki kesan yang lebih.
No comments:
Post a Comment