Cara menetapkan kotak prompt bootstrap

Bootstrap menyediakan kotak maklumat untuk elemen. Tetapan adalah seperti berikut: Tambah atribut data-toggle dan teks prompt; Muatkan perpustakaan Bootstrap JavaScript; dan memulakan pemalam kotak prompt.

Menyediakan kotak prompt bootstrap

Bootstrap menyediakan komponen kotak prompt untuk memaparkan maklumat apabila pengguna melayang atau mengklik elemen. Untuk menyediakan kotak segera, anda perlu melakukan langkah -langkah berikut:

1. Tambahkan tag html

Tambahkan data-toggle="tooltip" atribut dan teks prompt ke elemen yang anda mahu memaparkan kotak prompt.

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本">按钮</button></code>

2. Muatkan perpustakaan bootstrap JavaScript

Sertakan perpustakaan Bootstrap JavaScript di halaman anda.

 <code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script></code>

3. Kotak segera inisialisasi

Gunakan kelas Tooltip untuk memulakan kotak prompt.

 <code class="javascript">$(function () { $('[data-toggle="tooltip"]').tooltip(); });</code>

Sesuaikan penampilan kotak segera

Anda boleh menukar penampilan kotak prompt dengan menyesuaikan CSS. Sebagai contoh, anda boleh menukar warna kotak prompt:

 <code class="css">.tooltip-inner { background-color: #000; }</code>

Konfigurasikan Pilihan Kotak Prompt

Anda boleh mengkonfigurasi pilihan kotak prompt dengan mengubahsuai sifat data . Sebagai contoh, anda boleh menukar penempatan kotak prompt:

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本" data-placement="top">按钮</button></code>

Pilihan yang ada termasuk:

• placement : Penempatan kotak segera (seperti top , right , bottom , left )
• trigger : Acara yang mencetuskan kotak prompt (seperti hover , focus , click )
• delay : Kelewatan dalam kotak prompt menunjukkan dan tersembunyi di milisaat
• html : Benarkan kotak prompt mengandungi kandungan html

Contoh

Kod berikut menunjukkan kotak prompt yang disesuaikan sepenuhnya:

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本" data-placement="top" data-trigger="click" data-delay="500" data-html="true">按钮</button></code>

 <code class="css">.tooltip-inner { background-color: #000; color: #fff; }</code>

 <code class="javascript">$(function () { $('[data-toggle="tooltip"]').tooltip(); });</code>

Atas ialah kandungan terperinci Cara menetapkan kotak prompt bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!