Implementasi Tooltip dan Dropdown Pada Materialize

Halo selamat datang kembali di laman tips dan trik Source Code Aplikasi, lama tak berjumpa ya teman – teman. Bagus, di kesempatan kali ini saya akan melanjutkan tips mengenai framework css materialize nya. Dan di artikel terakhir, kemarin saya telah memberikan tips mengenai membangun caresoul dengan materialize. Di kesempatan kali ini kita akan membahas mengenai Implementasi Tooltip dan Dropdown Pada Materialize, dimana kedua kegunaan ini telah di sediakan oleh materialize. Kita tinggal memakai nya saja, dan hanya kembangkan sedikit saja tanpa mesti membuatnya dari ulang.

Sebelum kita mulai teman – teman siapkan file materialize nya, atau dapat unduh di laman resminya http://materializecss.com. Langkah berikutnya teman – teman siapkan text editornya, kemudian di file index.html buka dengan text editornya yang nantinya kita akan Implementasi Tooltip dan Dropdown Pada Materialize. Copy script html nya di bawah ini

<div class=container>
  <div class=row>
<div class=col s12 m12 l12>
  <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Fitur Dropdown</a>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href=#!>Home</a></li>
    <li><a href=#!>About Us</a></li>
    <li><a href=#!>Gallery</a></li>
    <li><a href=#!>Contact Us</a></li>
  </ul>
</div>
</div> 
</div>

Jikalau telah save dan jalankan di browser nya, karenanya hasilnya seperti gambar di bawah ini

Jikalau di klik karenanya dropdown akan muncul

Berikutnya kita akan membangun tooltip bagi dengan materialize, teman – teman copy script html nya di bawah ini

<div class=col s12 m12 l12> 
<br><br>
<i class=large material-icons>contacts</i>
<i class=large material-icons>message</i> 
<i class=large material-icons>perm_media</i>
<i class=large material-icons>video_library</i>
</div>

Di atas ini yakni script bagi memanggil atau membangun icons di materialize, kemudian kita akan membangun tooltip diantara icons di atas, teman – teman tambahkan tag a bagi tooptip nya bagi pembungkus icon nya

<a class=btn tooltipped data-position=bottom data-delay=50 data-tooltip=I am a tooltip>Hover me!</a>

Dimana di pada tag a mempunyai beberapa kegunaan yaitu

• tooltip : bagi memanggil class tooltip




• data-position : bagi mengatur posisi tooltip yang akan ditampilkan, kiri, kanan, atas dan bawah.




• data-tooltip: bagi memberikan isi dari tooltip yang akan ditampilkan

Teman – teman ubah file nya seperti gambar di bawah ini

Karenanya tooltip telah berhasil di bikin, teman – teman hanya perlu memakai sesuai keperluan saja. Di sini saya memberikan opsi saja, supaya banyak pilihannya. Bagus, sekianlah di artikel kali ini mengenai Implementasi Tooltip dan Dropdown Pada Materialize kita berjumpa kembali di artikel yang akan datang. Terimakasih dan hingga jumpa.

Semoga bermanfaat.

Sumber https://kursuswebsite.org