Petua alat

Gambaran keseluruhan

Perkara yang perlu diketahui apabila menggunakan pemalam tooltip:

• Petua alat bergantung pada pustaka pihak ke-3 Popper untuk kedudukan. Anda mesti menyertakan popper.min.js sebelum bootstrap.js atau gunakan bootstrap.bundle.min.js/ bootstrap.bundle.jsyang mengandungi Popper agar petua alat berfungsi!
• 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 di mana-mana sahaja

Satu cara untuk memulakan semua petua alat pada halaman ialah memilihnya mengikut data-bs-toggleatributnya:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Contoh

Tuding pada pautan di bawah untuk melihat petua alat:

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" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" 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" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Dengan SVG:

Sass

Pembolehubah

$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:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

Penggunaan

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

Cetuskan petua alat melalui JavaScript:

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  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" 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" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-bs-, seperti dalam data-bs-animation="". Pastikan anda menukar jenis kes bagi nama pilihan daripada camelCase kepada kebab-case apabila menghantar pilihan melalui atribut data. Sebagai contoh, daripada menggunakan data-bs-customClass="beautifier", gunakan data-bs-custom-class="beautifier".

Menggunakan fungsi denganpopperConfig

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

Kaedah

tunjuk

Mendedahkan petua alat elemen. Kembali kepada pemanggil sebelum petua alat sebenarnya ditunjukkan (iaitu sebelum shown.bs.tooltipperistiwa berlaku). Ini dianggap sebagai pencetus "manual" petua alat. Petua alat dengan tajuk panjang sifar tidak pernah dipaparkan.

tooltip.show()

bersembunyi

Menyembunyikan petua alat elemen. Kembali kepada pemanggil sebelum petua alat sebenarnya disembunyikan (iaitu sebelum hidden.bs.tooltipperistiwa berlaku). Ini dianggap sebagai pencetus "manual" petua alat.

tooltip.hide()

togol

Menogol petua alat elemen. Kembali kepada pemanggil sebelum petua alat benar-benar ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.tooltipatau hidden.bs.tooltipperistiwa berlaku). Ini dianggap sebagai pencetus "manual" petua alat.

tooltip.toggle()

buang

Menyembunyikan dan memusnahkan petua alat elemen (Mengalih keluar data yang disimpan pada elemen DOM). Petua alat yang menggunakan perwakilan (yang dibuat menggunakan pilihan ) tidak selectorboleh dimusnahkan secara individu pada elemen pencetus keturunan.

tooltip.dispose()

membolehkan

Memberi petua alat elemen keupayaan untuk ditunjukkan. Petua alat didayakan secara lalai.

tooltip.enable()

melumpuhkan

Mengalih keluar keupayaan untuk petua alat elemen untuk ditunjukkan. Petua alat hanya akan dapat ditunjukkan jika ia didayakan semula.

tooltip.disable()

toggleDidayakan

Togol keupayaan untuk petua alat elemen untuk ditunjukkan atau disembunyikan.

tooltip.toggleEnabled()

kemas kini

Mengemas kini kedudukan petua alat elemen.

tooltip.update()

getInstance

Kaedah statik yang membolehkan anda mendapatkan contoh petua alat yang dikaitkan dengan elemen DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Kaedah statik yang membolehkan anda mendapatkan contoh petua alat yang dikaitkan dengan elemen DOM, atau mencipta yang baharu sekiranya ia tidak dimulakan

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Peristiwa

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()