Implementasi Tooltip dan Dropdown Pada Materialize

Halo selamat datang kembali di website tips dan trik Dumet School, lama tidak berjumpa ya teman – teman. Baik, pada kesempatan kali ini saya akan melanjutkan tips tentang framework css materialize nya. Dan pada artikel terakhir, kemarin saya sudah memberikan tips tentang membuat caresoul dengan materialize. Pada kesempatan kali ini kita akan membahas tentang Implementasi Tooltip dan Dropdown Pada Materialize, dimana kedua fungsi ini sudah di sediakan oleh materialize. Kita tinggal memakai nya saja, dan hanya custom sedikit saja tanpa harus membuatnya dari ulang.

Sebelum kita mulai teman – teman siapkan file materialize nya, atau bisa download di website resminya http://materializecss.com. Langkah berikutnya teman – teman siapkan text editornya, kemudian pada 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'>Menu 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>

Jika sudah save dan jalankan pada browser nya, maka hasilnya seperti gambar di bawah ini

Jika di klik maka dropdown akan muncul

Selanjutnya kita akan membuat tooltip untuk 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 adalah script untuk memanggil atau membuat icons pada materialize, kemudian kita akan membuat tooltip diantara icons di atas, teman – teman tambahkan tag a untuk tooptip nya untuk pembungkus icon nya

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

Dimana di dalam tag a memiliki beberapa fungsi yaitu

tooltip : untuk memanggil class tooltip
data-position : untuk mengatur posisi tooltip yang akan ditampilkan, kiri, kanan, atas dan bawah.
data-tooltip: untuk memberikan isi dari tooltip yang akan ditampilkan

Teman – teman ubah file nya seperti gambar di bawah ini

Maka tooltip sudah berhasil di buat, teman – teman hanya perlu memakai sesuai kebutuhan saja. Di sini saya memberikan opsi saja, supaya banyak pilihannya. Baik, sekian pada artikel kali ini tentang Implementasi Tooltip dan Dropdown Pada Materialize kita berjumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa.

Semoga bermanfaat.

Implementasi Tooltip dan Dropdown Pada Materialize

Kategori