Tooltips
Dokumentasi lan conto kanggo nambah tooltips Bootstrap khusus karo CSS lan JavaScript nggunakake CSS3 kanggo animasi lan data-bs-atribut kanggo panyimpenan judhul lokal.
Ringkesan
Sing kudu dingerteni nalika nggunakake plugin tooltip:
- Tooltips gumantung ing Popper perpustakaan pihak katelu kanggo posisi. Sampeyan kudu nyakup popper.min.js sadurunge bootstrap.js utawa nggunakake
bootstrap.bundle.min.js
/bootstrap.bundle.js
sing ngemot Popper supaya tooltip bisa digunakake! - Tooltips dipilih kanggo alasan kinerja, dadi sampeyan kudu miwiti dhewe .
- Tooltips karo judhul nol-dawa ora tau ditampilake.
- Nemtokake
container: 'body'
kanggo ngindhari masalah rendering ing komponen sing luwih rumit (kayata grup input, grup tombol, lsp). - Triggering tooltips ing unsur didhelikake ora bakal bisa.
- Tooltips kanggo
.disabled
utawadisabled
unsur kudu micu ing unsur wrapper. - Nalika dipicu saka hyperlinks sing mbentang sawetara baris, tooltips bakal tengah. Gunakake
white-space: nowrap;
ing<a>
s kanggo supaya prilaku iki. - Tooltips kudu didhelikake sadurunge unsur sing cocog wis dibusak saka DOM.
- Tooltips bisa micu thanks kanggo unsur nang bayangan DOM.
prefers-reduced-motion
pitakon media. Deleng
bagean gerakan suda saka dokumentasi aksesibilitas kita .
Wis kabeh iku? Apik, ayo ndeleng cara kerjane karo sawetara conto.
Conto: Aktifake tooltip ing endi wae
Salah siji cara kanggo miwiti kabeh tooltip ing kaca yaiku milih kanthi data-bs-toggle
atribut:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Tuladha
Tutul ing pranala ing ngisor iki kanggo ndeleng tooltips:
Teks placeholder kanggo nduduhake sawetara pranala inline karo tooltips. Iki saiki mung pengisi, ora ana pembunuh. Isi diselehake ing kene mung kanggo niru anane teks nyata . Lan kabeh iku mung kanggo menehi idea babagan carane tooltip bakal katon nalika digunakake ing kahanan nyata. Dadi, muga-muga sampeyan saiki wis weruh carane tooltips ing pranala iki bisa digunakake ing praktik, yen sampeyan nggunakake ing situs utawa proyek sampeyan dhewe .
Tutul ing tombol ing ngisor iki kanggo ndeleng papat tooltip arah: ndhuwur, tengen, ngisor, lan kiwa. Arah dicerminake nalika nggunakake Bootstrap ing 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>
Lan karo HTML khusus ditambahake:
<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>
Kanthi SVG:
Sass
Variabel
$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;
Panggunaan
Plugin tooltip ngasilake konten lan markup sing dikarepake, lan kanthi gawan nyelehake tooltip sawise unsur pemicu.
Micu tooltip liwat JavaScript:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Kebanjiran auto
lanscroll
Posisi tooltip nyoba ngganti kanthi otomatis nalika wadhah induk duwe overflow: auto
utawa overflow: scroll
seneng karo kita .table-responsive
, nanging tetep posisi penempatan asli. Kanggo ngatasi masalah iki, setel boundary
opsi (kanggo pengubah flip nggunakake popperConfig
opsi) menyang HTMLElement kanggo ngganti nilai standar 'clippingParents'
, kayata document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Markup
Markup sing dibutuhake kanggo tooltip mung data
atribut lan title
ing unsur HTML sampeyan pengin duwe tooltip. Markup sing digawe saka tooltip cukup prasaja, sanajan mbutuhake posisi (kanthi standar, disetel top
dening plugin).
Nggawe tooltip bisa digunakake kanggo pangguna keyboard lan teknologi pitulung
Sampeyan mung kudu nambah tooltips menyang unsur HTML sing tradisional fokus keyboard lan interaktif (kayata pranala utawa kontrol formulir). Senajan unsur HTML kasepakatan (kayata <span>
s) bisa digawe fokus kanthi nambah tabindex="0"
atribut, iki bakal nambah potensi ngganggu lan mbingungake tab mandheg ing unsur non-interaktif kanggo pangguna keyboard, lan paling teknologi assistive saiki ora ngumumake tooltip ing kahanan iki. Kajaba iku, aja ngandelake mung hover
minangka pemicu tooltip sampeyan, amarga iki bakal nggawe tooltip sampeyan ora bisa dipicu kanggo pangguna keyboard.
<!-- 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>
Unsur dipatèni
Elemen karo disabled
atribut ora interaktif, tegese pangguna ora bisa fokus, hover, utawa ngeklik kanggo micu tooltip (utawa popover). Minangka solusi, sampeyan pengin micu tooltip saka pambungkus <div>
utawa <span>
, saenipun digawe keyboard-focusable nggunakake 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
Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-bs-
, kaya ing data-bs-animation=""
. Priksa manawa kanggo ngganti jinis cilik saka jeneng pilihan saka camelCase kanggo kebab-kasus nalika liwat opsi liwat atribut data. Contone, tinimbang nggunakake data-bs-customClass="beautifier"
, gunakake data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, lan
allowList
opsi ora bisa diwenehake nggunakake atribut data.
jeneng | Jinis | Default | Katrangan |
---|---|---|---|
animation |
boolean | true |
Gunakake transisi fade CSS menyang tooltip |
container |
senar | unsur | palsu | false |
Nambah tooltip menyang unsur tartamtu. Tuladha: |
delay |
nomer | obyek | 0 |
Tundha nuduhake lan ndhelikake tooltip (ms) - ora ditrapake kanggo jinis pemicu manual Yen nomer diwenehake, wektu tundha ditrapake kanggo ndhelikake / nuduhake Struktur obyek yaiku: |
html |
boolean | false |
Ngidini HTML ing tooltip. Yen bener, tag HTML ing tooltip Gunakake teks yen sampeyan kuwatir babagan serangan XSS. |
placement |
senar | fungsi | 'top' |
Carane posisi tooltip - otomatis | ndhuwur | ngisor | kiwa | bener. Nalika fungsi digunakake kanggo nemtokake panggonan, diarani simpul DOM tooltip minangka argumen pisanan lan unsur pemicu DOM node minangka kaloro. Konteks |
selector |
senar | palsu | false |
Yen pamilih diwenehake, obyek tooltip bakal didelegasikan menyang target sing ditemtokake. Ing laku, iki digunakake uga kanggo aplikasi tooltips kanggo mbosenke ditambahaké unsur DOM ( jQuery.on support). Waca iki lan conto informatif . |
template |
senar | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML dhasar kanggo digunakake nalika nggawe tooltip. Tooltip
Unsur pambungkus paling njaba kudu duwe |
title |
senar | unsur | fungsi | '' |
Nilai judhul standar yen Yen fungsi diwenehi, bakal disebut karo |
trigger |
senar | 'hover focus' |
Carane tooltip dipicu - klik | nglayang | fokus | manual. Sampeyan bisa ngliwati sawetara pemicu; misahake karo spasi.
|
fallbackPlacements |
susunan | ['top', 'right', 'bottom', 'left'] |
Nemtokake placements fallback kanthi menehi dhaptar panggonan ing array (miturut preferensi). Kanggo informasi luwih lengkap waca docs prilaku Popper |
boundary |
senar | unsur | 'clippingParents' |
Watesan watesan kebanjiran tooltip (mung ditrapake kanggo modifier preventOverflow Popper). Kanthi gawan, iku 'clippingParents' lan bisa nampa referensi HTMLElement (mung liwat JavaScript). Kanggo informasi luwih lengkap waca docs detectOverflow Popper . |
customClass |
senar | fungsi | '' |
Tambah kelas menyang tooltip nalika ditampilake. Elinga yen kelas iki bakal ditambahake saliyane kelas sing ditemtokake ing cithakan. Kanggo nambah sawetara kelas, misahake karo spasi: Sampeyan uga bisa pass fungsi sing ngirim bali senar siji ngemot jeneng kelas tambahan. |
sanitize |
boolean | true |
Aktifake utawa mateni sanitasi. Yen diaktifake 'template' lan 'title' opsi bakal diresiki. Deleng bagean sanitizer ing dokumentasi JavaScript kita . |
allowList |
obyek | Nilai standar | Obyek sing ngemot atribut lan tag sing diidini |
sanitizeFn |
null | fungsi | null |
Ing kene sampeyan bisa nyedhiyakake fungsi sanitasi dhewe. Iki bisa migunani yen sampeyan luwih seneng nggunakake perpustakaan khusus kanggo nindakake sanitasi. |
offset |
susunan | senar | fungsi | [0, 0] |
Offset tooltip relatif kanggo target. Sampeyan bisa ngliwati senar ing atribut data kanthi nilai sing dipisahake koma kaya: Nalika fungsi digunakake kanggo nemtokake offset, diarani obyek sing ngemot panggonan popper, referensi, lan popper rects minangka argumen pisanan. Node DOM unsur pemicu dilewati minangka argumen kapindho. Fungsi kasebut kudu ngasilake array kanthi rong nomer: . Kanggo informasi luwih lengkap waca docs offset Popper . |
popperConfig |
null | obyek | fungsi | null |
Kanggo ngganti konfigurasi Popper standar Bootstrap, ndeleng konfigurasi Popper . Nalika fungsi digunakake kanggo nggawe konfigurasi Popper, diarani karo obyek sing ngemot konfigurasi Popper standar Bootstrap. Iki mbantu sampeyan nggunakake lan nggabungake standar karo konfigurasi sampeyan dhewe. Fungsi kasebut kudu ngasilake obyek konfigurasi kanggo Popper. |
Atribut data kanggo tooltip individu
Pilihan kanggo tooltip individu bisa uga ditemtokake liwat nggunakake atribut data, kaya sing diterangake ing ndhuwur.
Nggunakake fungsi karopopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metode
Cara lan transisi asinkron
Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .
Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .
nuduhake
Nuduhake tooltip unsur. Bali menyang panelpon sadurunge tooltip wis bener ditampilake (yaiku sadurunge shown.bs.tooltip
acara kedaden). Iki dianggep minangka "manual" pemicu tooltip. Tooltips karo judhul nol-dawa ora tau ditampilake.
tooltip.show()
ndhelikake
Ndhelikake tooltip unsur. Bali menyang panelpon sadurunge tooltip bener-bener didhelikake (yaiku sadurunge hidden.bs.tooltip
kedadeyan kasebut). Iki dianggep minangka "manual" pemicu tooltip.
tooltip.hide()
ngalih
Ngalih tooltip unsur. Bali menyang panelpon sadurunge tooltip wis bener ditampilake utawa didhelikake (yaiku sadurunge acara shown.bs.tooltip
utawa hidden.bs.tooltip
kedadeyan). Iki dianggep minangka "manual" pemicu tooltip.
tooltip.toggle()
mbuwang
Ndhelikake lan ngrusak tooltip unsur (Mbusak data sing disimpen ing unsur DOM). Tooltips sing nggunakake delegasi (sing digawe nggunakake pilihanselector
) ora bisa dirusak individu ing unsur pemicu turunan.
tooltip.dispose()
ngaktifake
Menehi tooltip unsur kemampuan kanggo ditampilake. Tooltips diaktifake kanthi gawan.
tooltip.enable()
mateni
Mbusak kemampuan kanggo nuduhake tooltip unsur. Tooltip mung bakal bisa ditampilake yen wis diaktifake maneh.
tooltip.disable()
toggleAktifake
Ngalih kemampuan kanggo tooltip unsur supaya ditampilake utawa didhelikake.
tooltip.toggleEnabled()
nganyari
Nganyari posisi tooltip unsur.
tooltip.update()
getInstance
Cara statis sing ngidini sampeyan entuk conto tooltip sing ana gandhengane karo unsur DOM
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
Cara statis sing ngidini sampeyan entuk conto tooltip sing ana gandhengane karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti.
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Acara
Jenis acara | Katrangan |
---|---|
show.bs.tooltip |
Acara iki langsung murub nalika show metode conto diarani. |
shown.bs.tooltip |
Acara iki dipecat nalika tooltip wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung). |
hide.bs.tooltip |
Acara iki langsung dipecat nalika hide metode conto wis diarani. |
hidden.bs.tooltip |
Acara iki dipecat nalika tooltip wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS rampung). |
inserted.bs.tooltip |
Acara iki dipecat sawise show.bs.tooltip acara nalika cithakan tooltip wis ditambahake menyang DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()