Pemalam petua alat Bootstrap yang anda mesti pelajari setiap hari kemahiran javascript

Petua alat sangat berguna apabila anda ingin menerangkan pautan. Pemalam Tooltip telah diilhamkan oleh jQuery.tipsy yang ditulis oleh Jason Frame. Pemalam Tooltip telah membuat banyak peningkatan Sebagai contoh, ia tidak perlu bergantung pada imej, sebaliknya menggunakan CSS untuk mencapai kesan animasi dan menggunakan atribut data untuk menyimpan maklumat tajuk.

Jika anda ingin merujuk kefungsian pemalam ini secara berasingan, maka anda perlu merujuk tooltip.js. Sebagai alternatif, seperti yang dinyatakan dalam bab Gambaran Keseluruhan Plugin Bootstrap, anda boleh merujuk bootstrap.js atau versi mini bootstrap.min.js.
1. Penggunaan
Pemalam petua alat menjana kandungan dan penanda atas permintaan Secara lalai, petua alat diletakkan selepas elemen pencetusnya. Anda boleh menambah petua alat dalam dua cara berikut:

1. Melalui atribut data: Jika anda perlu menambah petua alat, cuma tambah data-toggle="tip alat" pada teg sauh. Tajuk sauh ialah teks petua alat. Secara lalai, pemalam menetapkan petua alat di bahagian atas.

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

2. Melalui JavaScript: Petua alat pencetus melalui JavaScript:

$('#identifier').tooltip(options)

Pemalam Tooltip bukanlah pemalam CSS tulen seperti menu lungsur turun dan pemalam lain yang dibincangkan sebelum ini. Untuk menggunakan pemalam, anda mesti mengaktifkannya menggunakan jquery (baca javascript). Gunakan skrip berikut untuk mendayakan semua petua alat pada halaman:

$(function () { $("[data-toggle='tooltip']").tooltip(); });

2
Sesetengah pilihan ditambahkan melalui Bootstrap Data API atau dipanggil melalui JavaScript. Pilihan disenaraikan dalam jadual di bawah:

3. Petua alat

//基本实例

<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
//JS 部分需要声明

$('#section').tooltip();

Petua alat mempunyai banyak sifat untuk mengkonfigurasi paparan petua, seperti berikut:

<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符"
 data-animation="false"
 data-html="true"
 data-placement="auto"
 data-selector="a[rel=tooltip]"
 data-trigger="click"
 data-delay="500"
 data-template="<b>123</b>"
>HTML5</a>

Kaedah JavaScript boleh terus mengalih keluar data sebelumnya. Termasuk: animasi, html, peletakan, pemilih, tajuk asal, tajuk, pencetus, kelewatan, bekas dan atribut templat.

//JavaScript 方式

$('#section a').tooltip({
 delay : {
  show : 500,
  hide : 100,
 },
 container : 'body'
}); 

JavaScript mempunyai empat kaedah: tunjukkan, sembunyikan, togol dan musnahkan.

//显示
$('#section a').tooltip('show');
//隐藏
$('#section a').tooltip('hide');
//反转显示和隐藏
$('#section a').tooltip('toggle');
//隐藏并销毁
$('#section a').tooltip('destroy');

Terdapat empat jenis acara dalam Petua Alat.

//Acara, lain yang serupa

$('#select a').on('show.bs.tooltip', function() {
 alert('调用 show 时触发！');
}); 

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.