Tutorial Belajar Bootstrap 4 Part 22 – Membuat Tooltip dengan Bootstrap
Selamat datang lagi di warungbelajar, masih dalam tutorial yang membahas mengenai bootstrap 4, dalam tutorial kali ini kita akan membahas mengenai Cara membuat Tooltips dengan bootstrap.
Tooltips adalah tampilan informasi yang akan tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link/button) dalam sebuah website
Dalam Bootstrap telah disediakan beberapa class yang bisa anda gunakan untuk membuat tooltip ini, baik langsung saja kita akan bahas dalam tutorial kali ini.
Cara membuat Tooltip dengan bootstrap 4
Perhatikan skrip dibawah ini :
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 | Tooltip</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Contoh Tooltip Link</h3> <hr/> <a href="#" data-toggle="tooltip" title="Text Pada Tooltip(Link)">Link</a> <hr/> <h3>Contoh Tooltip Button</h3> <hr/> <button class="btn btn-primary" data-toggle="tooltip" title="Text Pada Tooltip(Tombol)">Tombol</button> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html> |
Semisal kita simpan dengan nama basic_tooltip.html, lalu ketika dibuka di browser maka hasilnya adalah :
Keterangan :
- Sebelumnya anda harus membuat terlebih dahulu untuk pemicu dari tooltips, bisa menggunakan link ataupun bisa menggunakan button,perhatikan pada line 16 dan 20
- Pada masing – masing objek tersebut silahkan tambahkan attribute data-toogle dan berikan value tooltip (untuk value bisa anda ganti dengan yang lain), lalu tambahkan attribute title dan tambahkan value yang akan ditampilkan ketika ada mouse berada diobjek tersebut, perhatikan pada line 16 – 20
- Berikutnya buatlah skrip javascript, dalam hal ini kita gunakan jquery bawaan dari bootstrap, yang perlu anda sesuaikan adalah selector yang digunakan, karena pada bagian link/tombol pemicu kita memberikan value attribute data-toogle adalah tooltip, sehingga kita berikan selector #data-toogle=”tooltip”, perhatikan pada line 25
Mengatur Posisi Tooltip Bootstrap 4
Untuk mengatur posisi dari tooltip anda perlu memberikan attribute data-placement, untuk contohnya silahkan perhatikan skrip dibawah ini :
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 | Tooltip</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="text-align: center;"> <h3>Posisi Tooltip</h3> <hr/> <button class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Text pada Tooltip Atas">Tombol Tooltip (Atas)</button> <hr/> <button class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Text pada Tooltip Bawah">Tombol Tooltip (Bawah)</button> <hr/> <button class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Text pada Tooltip Kiri">Tombol Tooltip (Kiri)</button> <hr/> <button class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Text pada Tooltip Kanan">Tombol Tooltip (Kanan)</button> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html> |
Semisal kita simpan dengan nama posisi_tooltip.html, lalu kita buka di browser maka hasilnya :
Keterangan :
- Untuk mengatur posisi pada tooltip anda bisa menggunakan attribute data-placement (perhatikan pada line 16,18,20,22 ) dengan value top(atas),bottom(bawah),left(kiri), dan right(kanan)
Baik sekian dulu teman – teman pembahasan mengenai tooltip, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekain dulu sampai jumpa di tutorial bootstrap selanjutnya.
Tutorial tutorial yang disediakan Warung Belajar sangat bagus sekali, semoga kedepannya semakin baik dan bagus
Terima kasih mas Karis Maulana, semoga tutorial warungbelajar bisa bermanfaat untuk yang sedang belajar 😀
Saya lagi cari tutorial tooltip yang muncul di pojok kiri bawah, biayanya muncul dan tenggelam bergantian menampilkan orang yang baru beli / join di produk kita, apakah punya?
mohon maaf untuk saat ini belum ada kak
oke makasih, saya tunggu updatenya 🙂
Artikel ini sangat membantu