Source

Tooltips

Dokumentasi lan conto kanggo nambah tooltip Bootstrap khusus nganggo CSS lan JavaScript nggunakake CSS3 kanggo animasi lan atribut data kanggo panyimpenan judhul lokal.

Ringkesan

Sing kudu dingerteni nalika nggunakake plugin tooltip:

  • Tooltips gumantung ing perpustakaan pihak katelu Popper.js kanggo posisi. Sampeyan kudu nyakup popper.min.js sadurunge bootstrap.js utawa gunakake bootstrap.bundle.min.js/ bootstrap.bundle.jssing ngemot Popper.js supaya tooltip bisa digunakake!
  • Yen sampeyan lagi mbangun JavaScript saka sumber, mbutuhakeutil.js .
  • 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 .disabledutawa disabledunsur 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.

Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon 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-toggleatribut:

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

Tuladha

Tutul ing pranala ing ngisor iki kanggo ndeleng tooltips:

Celana ketat tingkat sabanjuré keffiyeh sampeyan mbokmenawa wis ora krungu saka wong-wong mau. Photo booth jenggot denim mentah letterpress vegan messenger bag stumptown. Seitan farm-to-table, mcsweeney's fixie sustainable quinoa 8-bit american apparel duwe terry richardson vinyl chambray. Jenggot stumptown, cardigan banh mi lomo thundercats. Tahu biodiesel williamsburg marfa, papat loko mcsweeney kang ngresiki vegan chambray. A artis tenan ironic apa keytar , scenester farm-to-table banksy Austin twitter nangani freegan cred denim mentah single-origin kopi viral.

Tutul ing tombol ing ngisor iki kanggo ndeleng papat tooltip arah: ndhuwur, tengen, ngisor, lan kiwa.

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

Lan karo HTML khusus ditambahake:

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

Panggunaan

Plugin tooltip ngasilake konten lan markup sing dikarepake, lan kanthi gawan nyelehake tooltip sawise unsur pemicu.

Micu tooltip liwat JavaScript:

$('#example').tooltip(options)
Kebanjiran autolanscroll

Posisi tooltip nyoba ngganti kanthi otomatis nalika wadhah induk duwe overflow: autoutawa overflow: scrollkaya kita .table-responsive, nanging tetep posisi panggonan asli. Kanggo mutusake masalah, setel boundarypilihan kanggo apa wae kajaba nilai standar 'scrollParent', kayata 'window':

$('#example').tooltip({ boundary: 'window' })

Markup

Markup sing dibutuhake kanggo tooltip mung dataatribut lan titleing unsur HTML sampeyan pengin duwe tooltip. Markup sing digawe saka tooltip cukup prasaja, sanajan mbutuhake posisi (kanthi standar, disetel topdening 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. Kajaba iku, paling teknologi pitulung saiki ora ngumumake tooltip ing kahanan iki.

Kajaba iku, aja ngandelake mung hoverminangka pemicu tooltip sampeyan, amarga iki bakal nggawe tooltip sampeyan ora bisa dipicu kanggo pangguna keyboard.

<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Unsur dipatèni

Elemen karo disabledatribut ora interaktif, tegese pangguna ora bisa fokus, hover, utawa ngeklik kanggo micu tooltip (utawa popover). Minangka workaround, sampeyan bakal pengin micu tooltip saka pambungkus <div>utawa <span>, saenipun digawe keyboard-focusable nggunakake tabindex="0", lan ngganti pointer-eventsing unsur dipatèni.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-animation="".

jeneng Jinis Default Katrangan
animasi boolean bener Gunakake transisi fade CSS menyang tooltip
wadhah senar | unsur | palsu palsu

Nambah tooltip menyang unsur tartamtu. Tuladha: container: 'body'. Opsi iki migunani banget amarga ngidini sampeyan nyetel tooltip ing aliran dokumen ing cedhak unsur pemicu - sing bakal nyegah tooltip ngambang adoh saka unsur pemicu nalika ngowahi ukuran jendhela.
tundha 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:delay: { "show": 500, "hide": 100 }
html boolean palsu

Ngidini HTML ing tooltip.

Yen bener, tag HTML ing tooltip titlebakal ditampilake ing tooltip. Yen palsu, textcara jQuery bakal digunakake kanggo nglebokake isi menyang DOM.

Gunakake teks yen sampeyan kuwatir babagan serangan XSS.
panggonan panggonan senar | fungsi 'ndhuwur'

Carane posisi tooltip - otomatis | ndhuwur | ngisor | kiwa | bener.
Yen autowis ditemtokake, bakal ngowahi tooltip kanthi dinamis.

Nalika fungsi digunakake kanggo nemtokake panggonan, diarani simpul DOM tooltip minangka argumen pisanan lan unsur pemicu DOM node minangka kaloro. Konteks thisdisetel menyang conto tooltip.
pamilih senar | palsu palsu 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.onsupport). Waca iki lan conto informatif .
cithakan senar '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

HTML dhasar kanggo digunakake nalika nggawe tooltip.

Tooltip titlebakal disuntikake menyang .tooltip-inner.

.arrowbakal dadi panah tooltip.

Unsur pambungkus paling njaba kudu duwe .tooltipkelas lan role="tooltip".
judhul senar | unsur | fungsi ''

Nilai judhul standar yen titleatribut ora ana.

Yen fungsi diwenehi, bakal disebut karo thisreferensi disetel kanggo unsur sing tooltip ditempelake.
pemicu senar 'fokus fokus'

Carane tooltip dipicu - klik | nglayang | fokus | manual. Sampeyan bisa ngliwati sawetara pemicu; misahake karo spasi.

'manual'nuduhake yen tooltip bakal micu programmatically liwat .tooltip('show'), .tooltip('hide')lan .tooltip('toggle')cara; Nilai iki ora bisa digabungake karo pemicu liyane.

'hover'dhewe bakal kasil tooltips sing ora bisa micu liwat keyboard, lan mung kudu digunakake yen cara alternatif kanggo ngirim informasi sing padha kanggo pangguna keyboard saiki.
ngimbangi nomer | senar 0 Offset tooltip relatif kanggo target. Kanggo informasi luwih lengkap waca docs offset Popper.js .
fallbackPlacement senar | susunan 'muter' Ngidini kanggo nemtokake posisi sing bakal digunakake Popper nalika mundur. Kanggo informasi luwih lengkap waca docs prilaku Popper.js
wates senar | unsur 'scrollParent' Wates kendala kebanjiran tooltip. Nampa nilai 'viewport', 'window', 'scrollParent', utawa referensi HTMLElement (JavaScript mung). Kanggo informasi luwih lengkap waca Popper.js kang preventOverflow docs .

Atribut data kanggo tooltip individu

Pilihan kanggo tooltip individu bisa uga ditemtokake liwat nggunakake atribut data, kaya sing diterangake ing ndhuwur.

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 .

$().tooltip(options)

Nempelake panangan tooltip menyang koleksi unsur.

.tooltip('show')

Nuduhake tooltip unsur. Bali menyang panelpon sadurunge tooltip wis bener ditampilake (yaiku sadurunge shown.bs.tooltipacara kedaden). Iki dianggep minangka "manual" pemicu tooltip. Tooltips karo judhul nol-dawa ora tau ditampilake.

$('#element').tooltip('show')

.tooltip('hide')

Ndhelikake tooltip unsur. Bali menyang panelpon sadurunge tooltip bener-bener didhelikake (yaiku sadurunge hidden.bs.tooltipkedadeyan kasebut). Iki dianggep minangka "manual" pemicu tooltip.

$('#element').tooltip('hide')

.tooltip('toggle')

Ngalih tooltip unsur. Bali menyang panelpon sadurunge tooltip wis bener ditampilake utawa didhelikake (yaiku sadurunge acara shown.bs.tooltiputawa hidden.bs.tooltipkedadeyan). Iki dianggep minangka "manual" pemicu tooltip.

$('#element').tooltip('toggle')

.tooltip('dispose')

Ndhelikake lan ngrusak tooltip unsur. Tooltips sing nggunakake delegasi (sing digawe nggunakake pilihanselector ) ora bisa dirusak individu ing unsur pemicu turunan.

$('#element').tooltip('dispose')

.tooltip('enable')

Menehi tooltip unsur kemampuan kanggo ditampilake. Tooltips diaktifake kanthi gawan.

$('#element').tooltip('enable')

.tooltip('disable')

Mbusak kemampuan kanggo nuduhake tooltip unsur. Tooltip mung bakal bisa ditampilake yen wis diaktifake maneh.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Ngalih kemampuan kanggo tooltip unsur supaya ditampilake utawa didhelikake.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Nganyari posisi tooltip unsur.

$('#element').tooltip('update')

Acara

Jinis Acara Katrangan
show.bs.tooltip Acara iki langsung murub nalika showmetode conto diarani.
ditampilake.bs.tooltip Acara iki dipecat nalika tooltip wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung).
hide.bs.tooltip Acara iki langsung dipecat nalika hidemetode 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.tooltipacara nalika cithakan tooltip wis ditambahake menyang DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})