Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4


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.

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.

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

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

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.

DEMO

SOURCE CODE

 

Incoming search terms:

  • malas ngoding bootstrap 4
  • malasngoding bootstrap 4
  • tooltip bootstrap
  • tootlip tidak keluar



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

border bootstrap 4
spinners bootstrap 4
scrollspy
Diskusi
Tidak Ada Komentar