Tooltips jika kita lihat artinya adalah Tooltip kecil, interaktif, petunjuk tekstual terutama untuk elemen grafis. Saat menggunakan ikon untuk tindakan, Anda dapat menggunakan tooltip untuk memberi klarifikasi orang pada fungsinya. Efek tooltips mirip seperti kita menggunakan hover, ketika krusor di atas element akan menimbulkan efek. Maka dari itu disini kita akan belajar membuat efek hover yang berbeda dengan tooltips di materialize, jangan kemana-mana simak terus ya teman-teman.
Read more
Seperti yang tadi saya tulis di atas Efek membuat efek hover yang berbeda dengan tooltips di materialize, bedanya jika kita memberikan hover kepada konten yang di berikan hover biasanya akan merubah warna, background, garis bawah, tetapi dengan tooltips kita akan membuat efek dimana ketika krusor di atas konten yang kita berikan tooltips efek yang d berikan adalah akan muncul teks baru entah di atas, bawah, kanan, dan kiri, seperti ketika kita membuat artikel tombol bantuan ya teman-teman.
Ada beberapa atribuy yang perlu teman-teman ketahui di antarannya adalah:
- class=”btn tooltipped” : btn untuk button dan tooltipped untuk ketika kita gunakan atau kita atur di javascriptnya, penamaan tooltipped adalah class juga jadi teman-teman bisa memberikan dengan nama class yang berbeda.
- data-position=”bottom” : posisi efek munculnya ingin dari mana bawah, atas, kanan, atau kiri.
- data-delay=”50″ : Waktu keluar efeknya, per milli seconds ya teman-teman.
- data-tooltip=”I am a tooltip” : tulisan yang akan muncul ketika hover.
Oke bagaimana saya membuatnya perhatikan struktur html berikut ini ya teman-teman:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style type="text/css"> .container{ width: 800px; margin: auto; } </style> </head> <body> <div class="container"> <h1>membuat efek hover yang berbeda dengan tooltips di materialize</h1> <!-- data-position can be : bottom, top, left, or right --> <!-- data-delay controls delay before tooltip shows (in milliseconds)--> <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="Saya bawah ">sentuh aku</a> <a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="Saya diatas">Sentuh Aku </a> <a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="Saya kiri">Sentuh Aku </a> <a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="Saya kanan ">Sentuh Aku </a> </div> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.tooltipped').tooltip({delay: 50}); }); </script> </body> </html> |
Saya membuat efek dengan 4 posisi ya teman-teman ada bawah, atas, kanan dan kiri. Untuk javascript sebenarnya tidak di berikan tidak apa tetapi seiapa tau teman-teman ingin membuat waktu di javascript. Dan saya rasa cukup sampai disini dulu belajar kita tentang membuat efek hover yang berbeda dengan tooltips di materialize, semoga bermanfaat dan sampai jumpa pada artikel selanjutnnya terimakasih.