Petua alat

Gambaran keseluruhan

Perkara yang perlu diketahui apabila menggunakan pemalam tooltip:

• Petua alat bergantung pada pustaka pihak ketiga Popper untuk kedudukan. Anda mesti menyertakan popper.min.js sebelum bootstrap.js, atau gunakan bootstrap.bundle.min.jsyang mengandungi Popper.
• Petua alat ikut serta atas sebab prestasi, jadi anda mesti memulakannya sendiri .
• Petua alat dengan tajuk panjang sifar tidak pernah dipaparkan.
• Tentukan container: 'body'untuk mengelakkan masalah rendering dalam komponen yang lebih kompleks (seperti kumpulan input kami, kumpulan butang, dll).
• Mencetuskan petua alat pada elemen tersembunyi tidak akan berfungsi.
• Petua alat untuk .disabledatau disabledelemen mesti dicetuskan pada elemen pembalut.
• Apabila dicetuskan daripada hiperpautan yang menjangkau berbilang baris, petua alat akan dipusatkan. Gunakan white-space: nowrap;pada <a>s anda untuk mengelakkan tingkah laku ini.
• Petua alat mesti disembunyikan sebelum elemen yang sepadan dialih keluar daripada DOM.
• Petua alat boleh dicetuskan terima kasih kepada elemen dalam DOM bayangan.

Dapat semua itu? Hebat, mari lihat cara ia berfungsi dengan beberapa contoh.

Contoh

Dayakan petua alat

Seperti yang dinyatakan di atas, anda mesti memulakan petua alat sebelum ia boleh digunakan. Satu cara untuk memulakan semua petua alat pada halaman ialah memilihnya mengikut data-bs-toggleatributnya, seperti:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Petua alat pada pautan

Tuding pada pautan di bawah untuk melihat petua alat:

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Petua alat tersuai

Anda boleh menyesuaikan penampilan petua alat menggunakan pembolehubah CSS . Kami menetapkan kelas tersuai dengan data-bs-custom-class="custom-tooltip"skop penampilan tersuai kami dan menggunakannya untuk mengatasi pembolehubah CSS setempat.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Arah

Tuding pada butang di bawah untuk melihat empat arah petua alat: atas, kanan, bawah dan kiri. Arah dicerminkan apabila menggunakan Bootstrap dalam RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>

Dan dengan HTML tersuai ditambahkan:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Dengan SVG:

CSS

Pembolehubah

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang sedang berkembang, petua alat kini menggunakan pembolehubah CSS tempatan .tooltipuntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Pembolehubah Sass

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

Penggunaan

Pemalam petua alat menjana kandungan dan penanda atas permintaan, dan secara lalai meletakkan petua alat selepas elemen pencetusnya.

Cetuskan petua alat melalui JavaScript:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  boundary: document.body // or document.querySelector('#boundary')
})

Penanda

Penanda yang diperlukan untuk petua alat hanyalah dataatribut dan titlepada elemen HTML anda ingin mempunyai petua alat. Penanda yang dijana bagi petua alat agak mudah, walaupun ia memerlukan kedudukan (secara lalai, ditetapkan topoleh pemalam).

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Elemen yang dilumpuhkan

Elemen dengan disabledatribut tidak interaktif, bermakna pengguna tidak boleh memfokus, menuding atau mengkliknya untuk mencetuskan petua alat (atau popover). Sebagai penyelesaian, anda perlu mencetuskan petua alat daripada pembalut <div>atau <span>, yang idealnya boleh difokuskan papan kekunci menggunakan tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Pilihan

Memandangkan pilihan boleh dihantar melalui atribut data atau JavaScript, anda boleh menambahkan nama pilihan pada data-bs-, seperti dalam data-bs-animation="{value}". Pastikan anda menukar jenis kes bagi nama pilihan daripada " camelCase " kepada " kebab-case " apabila menghantar pilihan melalui atribut data. Sebagai contoh, gunakan data-bs-custom-class="beautifier"bukannya data-bs-customClass="beautifier".

Mulai Bootstrap 5.2.0, semua komponen menyokong atribut data simpanan percubaandata-bs-config yang boleh menempatkan konfigurasi komponen ringkas sebagai rentetan JSON. Apabila elemen mempunyai data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang berasingan akan mengatasi nilai yang diberikan pada data-bs-config. Selain itu, atribut data sedia ada dapat menempatkan nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Menggunakan fungsi denganpopperConfig

const tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Kaedah

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Peristiwa

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
  // do something...
})

tooltip.hide()