About

Wednesday, March 29, 2017

Belajar CSS Part 16 Tooltips

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.

LATAR BELAKANG

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.


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.


Faiz Ahmad

About Faiz Ahmad

Faiz Ahmad. Salatiga, 28 Juni 2000. Saya hanya seorang Hamba Allah yang masih banyak kekurangan, maka dari itu saya ingin menutupi kekurangan saya dengan melakukan hal yang bermanfaat kepada orang lain. Seperti filosofi tanah “Bermanfaat untuk orang sebanyak mungkin, namun dikenal oleh orang sesedikit mungkin”. Pernahkah kita mengingat jasa tanah? Sedetik saja dalam sehari? Saya rasa hanya sedikit sekali yang mengingatnya, berbeda dengan matahari yang jasanya selalu kita ingat. Padahal kita semua tentu tahu bagaimana jadinya dunia ini jika tidak ada tanah.

Subscribe to this Blog via Email :