Sudah lama saya menggunakan Jquery, Bootstrap, ataupun beberapa framework lain untuk membuat web ataupun aplikasi, tapi baru kemarin saya menyadari ada bagian-bagian tertentu yang baru dapat bekerja kalau saya tambahi kode sendiri. Setiap kali mengerjakan pesanan, saya biasanya fokus agar produk yang dibuat dapat berfungsi dan segera selesai dikerjakan.
Saya memang tidak selalu menggunakan cara yang sama dengan petunjuk resmi dari framework ataupun plugin yang saya gunakan. Kalau diperhatikan memang elemen atau komponen yang dikerjakan tetap dapat berfungsi sesuai fungsinya tapi secara tampilan ternyata ada bedanya.
Entah kenapa kemarin saya ingin membaca dokumentasi resmi yang ada di website Bootstrap dan tertarik menggunakan cara yang sama persis seperti petunjuk tertulis. Kemarin saya memperhatikan benar-benar cara yang sesuai dengan petunjuk dan kemudian coba saya praktekkan.
Awalnya beberapa komponen dapat berfungsi dengan baik, tapi giliran saya menggunakan elemen yang berkaitan dengan jQuery saya mulai menemui beberapa masalah. Salah satu contohnya yaitu pada saat menggunakan elemen tooltip.
Selama ini saya yang jarang menggunakannya atau memang saya cukup puas dengan cara yang sebelumnya saya gunakan sehingga saya baru menyadari kalau tampilan yang muncul dari tooltip bootstrap tidak dapat sama persis seperti dokumentasi resmi bootstrap. Terutama saat saya ingin membuat tooltip yang muncul dengan title berisi kode html.
Setelah saya mencari tahu sumber masalahnya kenapa saya kesulitan dalam menampilkan tooltip dalam project saya adalah karena saya masih menggunakan bootstrap.min saja yang saya ambil dari website resmi yang ternyata tidak dapat bekerja. Walhasil saya coba teliti kembali dokumentasi bootstrap dan akhirnya menemukan solusinya.
Ternyata solusinya adalah dengan menggunakan bootstrap.bundle.js dimana didalamnya sudah terdapat bootstrap.js dengan popper.js.
Setelah saya coba kembali akhirnya saya cukup puas dengan tampilan yang dapat muncul sama persis dengan dokumentasi Bootstrap.
Sebenarnya langkah yang dibutuhkan sudah tertulis secara lengkap di website resmi Bootstrap. Anda tinggal mengikutinya saja dengan seksama.
Secara singkatnya sebagai berikut:
- Buat kode html di file anda
- Panggil CSS yaitu boostrap.css di file anda
- Panggil JQuery
- Panggil JavaScript yaitu bootstrap.bundle.js ke file anda
- Aktifkan fungsi tooltip pada saat dokumen meload jQuery
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
atau bisa juga cara lama
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();//membangkitkan css tooltip
});
Perbedaan bootstrap.js dengan boostrap.bundle.js
Bootstrap.js biasa tidak dilengkapi dengan fungsi-fungsi popper.js, maka agar anda dapat menggunakan elemen dengan memanfaatkan fungsi popper.js anda bisa memasang dan memanggilnya terlebih dulu sebelum memanggil bootstrap.js.
Apabila anda tidak mau repot anda dapat menggunakan bootstrap.bundle.js.
Kelebihan dengan menggunakan bootstrap.bundle.js adalah dapat mengoptimalkan fungsi-fungsi bawaan Bootstrap seperti dokumentasinya. Tapi bila menggunakan bootstrap.bundle maka ukuran library yang harus anda panggil akan sedikit lebih besar.
Tidak ada komentar:
Posting Komentar