Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4
Tooltips Bootstrap 4 – Selamat datang kembali di tutorial lengkap bootstrap 4 step by step untuk pemula sampai mahir di www.malasngoding.com.
Setelah pada tutorial sebelumnya dijelaskan tentang tutorial komponen toast, Maka untuk melanjutkan seri tutorial bootstrap 4 di malasngoding.com, kita lanjutkan dengan materi Tooltips.
Tooltips Bootstrap 4
Tooltips adalah sebuah pesan yang muncul ketika cursor diletakkan pada sebuah elemen, bisa itu tombol, gambar, link dan lain-lain.
Jadi ketika user meletakkan cursor pada elemen tertentu yang sudah kita pasang tooltips, maka akan muncul semacam pesan. dan ketika cursor keluar dari elemen tersebut maka tooltips kembali hilang.
Langsung saja kita lihat contoh cara pembuatannya menggunakan bootstrap 4.
Tooltips Bootstrap 4
Ada beberapa hal yang perlu diperhatikan ketika ingin membuat komponen tooltips bootstrap 4. Seperti yang dijelaskan dari dokumentasi bootstrap sendiri tentang tooltips, bahwa kita harus menghubungkan project dengan file popper.js.
Karena komponen seperti tooltips, dan beberapa komponen yang sudah kita bahas sebelumnya memerlukan popper.js agar bisa berjalan dengan baik.
Cara menghubungkan project dengan popper.js sudah dijelaskan pada tutorial bootstrap 4 sebelumnya di www.malasngoding.com.
Silahkan teman-teman baca lagi tutorial cara menggunaan bootstrap 4.
Oke kita mulai dengan contoh tooltips sederhana.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Halo, Tooltip berada di atas"> Tooltip di atas </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Halo, Tooltip berada di kanan"> Tooltip di kanan </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Halo, Tooltip berada di bawah"> Tooltip di bawah </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Halo, Tooltip berada di kiri"> Tooltip di kiri </button> |
Pada contoh di atas saya membuat empat buah tombol. dan pada masing-masing tombol tersebut sudah saya buatkan atribut-atribut yang harus digunakan untuk membuat komponen tooltips.
Diantaranya adalah :
- data-toggle=””
Biasanya digunakan untuk penamaan suatu elemen. seperti pengganti penamaan id dan class pada sebuah elemen. - data-placement=””
Atribut ini untuk pengaturan lokasi dimana tooltip akan tampil. isi dengan “top” jika ingin tooltip tampil di atas, “right” jika ingin tooltip tampil di kanan, “bottom” jika ingin tooltip tampil di kiri, dan “left” jika ingin tooltip tampil di kiri. - title=””
Isi dengan pesan yang ingin dimunculkan pada bagian dalam tooltip.
Baca juga cara membuat tombol dengan bootstrap 4.
Selanjutnya agar tooltip tampil, kita harus memanggilnya dengan fungsi tooltip() menggunakan jquery. caranya seperti berikut.
|
1 2 3 4 5 6 7 |
<script> $(function () { $('[data-toggle="tooltip"]').tooltip(); }); </script> |
Itu sebabnya kita perlu menghubungkan project dengan jquery.js dan popper.js seperti pada saat membuat scrollspy dan toast yang sudah dibahas pada tutorial bootstrap 4 sebelumnya.
Perintah jquery di atas maksudnya kita memerintahkan untuk menjalankan tooltip() pada semua elemen yang memiliki atribut data-toggle=”tooltip”.
Sehingga keseluruhan source codenya akan menjadi seperti berikut.
tooltips.html
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Tooltips Bootstrap 4 - www.malasngoding.com</title> </head> <body> <div class="container"> <center> <h3>Tutorial Tooltips Bootstrap 4</h3> <h4><a href="https://www.malasngoding.com/tooltips-bootstrap-4/">www.malasngoding.com</a></h4> </center> <br/> <br/> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Halo, Tooltip berada di atas"> Tooltip di atas </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Halo, Tooltip berada di kanan"> Tooltip di kanan </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Halo, Tooltip berada di bawah"> Tooltip di bawah </button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Halo, Tooltip berada di kiri"> Tooltip di kiri </button> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> <script> $(function () { $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html> |
Sekarang kita coba jalankan, dan kita coba untuk meletakkan cursor mouse pada tombol-tombol yang sudah kita beri tooltip di atas tadi.
tooltips bootstrap 4
Oke, tooltips pun berhasil tampil seperti yang kita harapkan.
Sedikit info, untuk selector di bagian fungsi tooltip() jquery di atas, kita bisa menggantinya dengan menggunakan class atau id. seperti yang sudah dijelaskan pada tutorial jquery yang sudah pernah dibahas.
Oke teman-teman sekian tutorial tentang tooltips menggunakan bootstrap 4. semoga bermanfaat.
Untuk source code dan demo nya bisa teman-teman lihat dan download pada link berikut.
Tutorial Menarik Lainnya
Tutorial Bootstrap 4 #35 : Border Bootstrap 4
Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4
Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4
Tutorial Bootstrap 4 #31 : Scrollspy Bootstrap 4
Gmana cara klo pake tooltip dan modal dalam 1 tombol button sedangkan modal dan tooltip sama sama pakai data-toggle mohon bantuannya suhu agar tooltip dan modal barjln dlm 1 tombol