Tooltips sangat berguna saat Anda ingin menggambarkan tautan. Plugin Tooltip terinspirasi oleh jQuery.tipsy yang ditulis oleh Jason Frame. Plug-in Tooltip telah membuat banyak perbaikan, seperti tidak mengandalkan gambar, tetapi menggunakan CSS untuk mencapai efek animasi dan menggunakan atribut data untuk menyimpan informasi judul.
Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu referensi tooltip.js. Atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap, Anda dapat merujuk ke bootstrap.js atau versi terkompresi bootstrap.min.js.
1. Penggunaan
Tooltip plug-in menghasilkan konten dan tag berdasarkan persyaratan. Secara default, tooltips ditempatkan di belakang elemen pemicu mereka. Ada dua cara Anda dapat menambahkan tooltips:
1. Melalui atribut data: Jika Anda perlu menambahkan tooltip, cukup tambahkan data-kilat = "tooltip" ke tag jangkar. Judul jangkar adalah teks dari tooltip. Secara default, plugin mengatur tooltip di bagian atas.
<a href = "#" data-koggle = "tooltip"> tolong arahkan ke arah saya </a>
2. Melalui JavaScript: Trigger Tooltip (Tooltip) melalui JavaScript:
$ ('#Identifier'). Tooltip (Opsi)Plugin Tooltip tidak seperti menu drop-down dan plug-in lainnya yang dibahas sebelumnya, ini bukan plug-in CSS murni. Untuk menggunakan plugin, Anda harus mengaktifkannya menggunakan jQuery (baca JavaScript). Gunakan skrip berikut untuk mengaktifkan semua tooltips di halaman:
$ (function () {$ ("[data-koggle = 'tooltip']"). tooltip ();});2. Opsi
Ada beberapa opsi yang ditambahkan melalui bootstrap data API (Bootstrap Data API) atau dipanggil melalui JavaScript. Tabel berikut mencantumkan opsi ini:
tiga. Tooltips
// Contoh Dasar <a href = "#" data-koggle = "tooltip"> html5 </a> // bagian js perlu mendeklarasikan $ ('#bagian'). Tooltip ();Tooltips memiliki banyak properti untuk mengonfigurasi tampilan prompt, sebagai berikut:
<a href = "#" rel = "tooltip" data-koggle = "tooltip" data-animasi = "false" data-html = "true" data-placement = "otomatis" selector = "a [rel = tooltip]" b> "b>" aT/b> </b> </b> </b> </b> </b> </b> </b> </b> </b> </b> </b> </b> </"500" </B> </B> </B/"DATA" </"500" DATA-TEMPLATE = "<B> </B> </B/" DATA "</" 500 "Data-TEMPLATE =" <B> <B> 123 </B/"DATA" </"500" Data-TEMPLATE = "<B>" 123 "DATA" DATA "DATA" DATA "500" 500 "
Cukup hapus data sebelumnya di JavaScript. Termasuk: animasi, html, penempatan, pemilih, judul asli, judul, pemicu, penundaan, wadah dan templat dan properti lainnya.
// metode javascript $ ('#bagian a'). Tooltip ({delay: {show: 500, hide: 100,}, wadah: 'body'});Ada empat metode untuk JavaScript: show, hide, sakelar, dan hancurkan.
// tunjukkan $ ('#Bagian A'). Tooltip ('show'); // Sembunyikan $ ('#Bagian A'). Tooltip ('Hide'); // Invert Show and Sembunyikan $ ('#Bagian A'). Tooltip ('Toggle'); // Sembunyikan dan Hancurkan $ ('#Bagian A'). Tooltip ('hancur');Ada empat jenis acara di Tooltip.
// Acara, kesamaan lainnya
$ ('#Pilih A'). ON ('show.bs.tooltip', function () {alert ('gratis saat acara dipanggil!');});Serangkaian tutorial ini telah dikompilasi ke dalam: Tutorial Dasar Bootstrap Topik Khusus, Selamat datang untuk mengklik untuk belajar.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.