Source

Tooltips

Dokuméntasi sareng conto pikeun nambihan tooltip Bootstrap khusus sareng CSS sareng JavaScript nganggo CSS3 pikeun animasi sareng atribut data pikeun neundeun judul lokal.

Ihtisar

Hal-hal anu kedah terang nalika nganggo plugin tooltip:

  • Tooltips ngandelkeun perpustakaan pihak ka-3 Popper.js pikeun positioning. Anjeun kedah ngalebetkeun popper.min.js sateuacan bootstrap.js atanapi nganggo bootstrap.bundle.min.js/ bootstrap.bundle.jsanu ngandung Popper.js supados tooltip tiasa dianggo!
  • Upami anjeun nuju ngawangun JavaScript kami tina sumber, peryogiutil.js .
  • Tooltips dipilih pikeun alesan kinerja, jadi Anjeun kudu initialize aranjeunna sorangan .
  • Tooltips kalawan judul nol-panjangna pernah ditémbongkeun.
  • Sebutkeun container: 'body'pikeun nyegah masalah rendering dina komponén anu langkung kompleks (sapertos grup input kami, grup tombol, jsb).
  • Triggering tooltips on elemen disumputkeun moal jalan.
  • Tooltips pikeun .disabledatawa disabledelemen kudu dipicu dina elemen wrapper.
  • Lamun dipicu tina hyperlinks nu bentang sababaraha garis, tooltips bakal dipuseurkeun. Paké white-space: nowrap;on <a>s anjeun ulah kabiasaan ieu.
  • Tooltips kudu disumputkeun saméméh elemen pakait maranéhanana geus dihapus tina DOM.
  • Tooltips tiasa dipicu ku unsur dina DOM kalangkang.

Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Ngagaduhan sadayana éta? Hébat, hayu urang tingali kumaha aranjeunna damel sareng sababaraha conto.

Conto: Aktipkeun tooltips dimana-mana

Salah sahiji cara pikeun ngamimitian sadaya tooltip dina halaman nyaéta milih ku data-toggleatributna:

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

Contona

Hover dina tumbu di handap pikeun ningali tooltips:

Calana ketat tingkat salajengna keffiyeh Anjeun meureun geus teu ngadéngé éta. Booth poto janggot denim atah letterpress vegan utusan kantong stumptown. Ladang-ka-méja seitan, mcsweeney urang fixie sustainable quinoa 8-bit apparel Amérika boga terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tahu biodiesel williamsburg marfa, opat loko mcsweeney urang cleanse vegan chambray. A artisan bener ironis keytar naon , scenester tegalan-to-méja banksy Austin twitter nanganan freegan cred denim atah single-asal kopi viral.

Hover dina tombol di handap pikeun nempo opat arah tooltips: luhur, katuhu, handap, jeung kénca.

<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>

Sareng ditambah HTML khusus:

<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>

Pamakéan

Plugin tooltip ngahasilkeun eusi sareng markup dumasar kana paménta, sareng sacara standar nempatkeun tooltip saatos unsur pemicuna.

Micu tooltip via JavaScript:

$('#example').tooltip(options)
Ngabahekeun autojeungscroll

Posisi tooltip nyoba otomatis robah lamun wadah indungna boga overflow: autoatawa overflow: scrollresep kami .table-responsive, tapi tetep ngajaga posisi panempatan aslina urang. Pikeun ngabéréskeun, setel boundarypilihan ka nanaon lian ti nilai standar, 'scrollParent', kayaning 'window':

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

Markup

Markup anu diperyogikeun pikeun tooltip ngan ukur dataatribut sareng titledina unsur HTML anjeun hoyong gaduh tooltip. Markup anu dihasilkeun tina tooltip rada saderhana, sanaos peryogi posisi (sacara standar, disetel topku plugin).

Nyieun tooltips dianggo pikeun keyboard jeung pamaké téhnologi assistive

Anjeun ngan kedah nambahkeun tooltips kana elemen HTML nu tradisional keyboard-focusable sarta interaktif (saperti tumbu atawa kontrol formulir). Sanajan elemen HTML sawenang (saperti <span>s) bisa dijieun focusable ku nambahkeun tabindex="0"atribut, ieu bakal nambahan tab berpotensi bangor tur ngabingungkeun eureun dina elemen non-interaktif pikeun pamaké keyboard. Salaku tambahan, kalolobaan téknologi anu ngabantosan ayeuna henteu ngumumkeun tooltip dina kaayaan ieu.

Salaku tambahan, ulah ngan ukur ngandelkeun hoversalaku pemicu pikeun tooltip anjeun, sabab ieu bakal ngajantenkeun tooltip anjeun teu mungkin dipicuna pikeun 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 ditumpurkeun

Unsur-unsur anu gaduh disabledatribut henteu interaktif, hartosna pangguna henteu tiasa museurkeun, hover, atanapi klik aranjeunna pikeun memicu tooltip (atanapi popover). Salaku workaround a, Anjeun bakal hoyong micu tooltip ti wrapper <div>atawa <span>, idéal dijieun keyboard-focusable ngagunakeun tabindex="0", sarta override pointer-eventsdina elemen ditumpurkeun.

<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

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-animation="".

Ngaran Tipe Default Katerangan
animasi boolean leres Larapkeun transisi fade CSS kana tooltip
wadahna senar | unsur | palsu palsu

Appends tooltip ka elemen husus. Contona: container: 'body'. Pilihan ieu hususna kapaké sabab ngamungkinkeun anjeun pikeun nempatkeun tooltip dina aliran dokumen caket unsur pemicu - anu bakal nyegah tooltip ngambang jauh tina unsur pemicu nalika ngarobah ukuran jandela.
reureuh angka | objék 0

Reureuh némbongkeun sarta nyumputkeun tooltip (ms) - teu dilarapkeun ka tipe pemicu manual

Lamun jumlah disadiakeun, reureuh diterapkeun ka duanana nyumputkeun / acara

Struktur objék nyaéta:delay: { "show": 500, "hide": 100 }
html boolean palsu

Ngidinan HTML dina tooltip.

Upami leres, tag HTML dina tooltip titlebakal ditingalikeun dina tooltip. Upami palsu, textmetode jQuery bakal dianggo pikeun nyelapkeun eusi kana DOM.

Anggo téks upami anjeun hariwang ngeunaan serangan XSS.
panempatan senar | fungsi 'luhureun'

Kumaha posisi tooltip - otomatis | luhur | handap | ditinggalkeun | leres.
Lamun autodieusian, éta bakal dinamis reorient tooltip nu.

Nalika hiji fungsi dipaké pikeun nangtukeun panempatan, mangka disebut titik tooltip DOM salaku argumen kahiji sarta triggering unsur titik DOM salaku kadua. Kontéks thisdisetel ka conto tooltip.
pamilih senar | palsu palsu Upami pamilih disayogikeun, obyék tooltip bakal didelegasikeun ka udagan anu ditangtukeun. Dina prakna, ieu dipaké pikeun ogé nerapkeun tooltips pikeun dinamis ditambahkeun elemen DOM ( jQuery.onrojongan). Tingali ieu sareng conto informatif .
citakan senar '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Dasar HTML pikeun dianggo nalika nyiptakeun tooltip.

Tooltip urang titlebakal nyuntik kana .tooltip-inner.

.arrowbakal janten panah tooltip.

Unsur wrapper pangluarna kudu boga .tooltipkelas na role="tooltip".
judul senar | unsur | fungsi ''

Nilai judul standar upami titleatribut teu aya.

Upami fungsina dipasihkeun, éta bakal disebat sareng thisreferensina disetel ka unsur anu napel tooltip.
pemicu senar 'fokus fokus'

Kumaha tooltip dipicu - klik | ngalayang | fokus | manual. Anjeun tiasa ngalangkungan sababaraha pemicu; misahkeun aranjeunna kalayan spasi.

'manual'nunjukkeun yén tooltip bakal dipicu programmatically via .tooltip('show'), .tooltip('hide')jeung .tooltip('toggle')métode; nilai ieu teu bisa digabungkeun jeung sagala pemicu séjén.

'hover'sorangan bakal ngahasilkeun tooltips nu teu bisa micu via keyboard, sarta ngan kudu dipaké lamun aya métode alternatif pikeun nepikeun informasi anu sarua pikeun pamaké keyboard.
ngimbangan angka | senar 0 Offset tooltip relatif ka target na. Kanggo inpo nu leuwih lengkep tingal docs offset Popper.js urang .
fallbackPlacement senar | susunan 'malik' Ngidinan pikeun nangtukeun posisi Popper anu bakal dianggo dina fallback. Kanggo inpo nu leuwih lengkep tingal docs kabiasaan Popper.js urang
wates senar | unsur 'scrollParent' wates konstrain mudal tina tooltip. Narima nilai 'viewport', 'window', 'scrollParent', atawa rujukan HTMLElement (JavaScript wungkul). Kanggo inpo nu leuwih lengkep tingal Popper.js urang preventOverflow docs .

Atribut data pikeun tooltips individu

Pilihan pikeun tooltips individu Alternatipna bisa dieusian ngaliwatan pamakéan atribut data, sakumaha dipedar di luhur.

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

$().tooltip(options)

Ngagantelkeun panangan tooltip ka kumpulan unsur.

.tooltip('show')

Nembongkeun tooltip hiji unsur. Mulih ka nu nelepon saméméh tooltip sabenerna geus ditémbongkeun (ie saméméh shown.bs.tooltipacara lumangsung). Ieu dianggap "manual" pemicu tooltip. Tooltips kalawan judul nol-panjangna pernah ditémbongkeun.

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

.tooltip('hide')

Nyumputkeun tooltip unsur. Mulih ka panelepon saméméh tooltip sabenerna disumputkeun (ie saméméh hidden.bs.tooltipacara lumangsung). Ieu dianggap "manual" pemicu tooltip.

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

.tooltip('toggle')

Toggles tooltip hiji unsur. Mulih ka nu nelepon saméméh tooltip sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.tooltipatawa hidden.bs.tooltipkajadian lumangsung). Ieu dianggap "manual" pemicu tooltip.

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

.tooltip('dispose')

Nyumputkeun sareng ngancurkeun tooltip unsur. Tooltips nu make delegasi (anu dijieun maké pilihanselector ) teu bisa individual ancur dina elemen pemicu turunan.

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

.tooltip('enable')

Méré tooltip hiji unsur kamampuhan pikeun dipintonkeun. Tooltips diaktipkeun sacara standar.

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

.tooltip('disable')

Ngaleungitkeun kamampuan pikeun nunjukkeun tooltip unsur. Tooltip ngan bakal tiasa ditingalikeun upami diaktipkeun deui.

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

.tooltip('toggleEnabled')

Toggles kamampuhan pikeun tooltip unsur pikeun ditémbongkeun atawa disumputkeun.

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

.tooltip('update')

Ngamutahirkeun posisi tooltip hiji unsur.

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

Kajadian

Jenis Acara Katerangan
show.bs.tooltip Kajadian ieu langsung hurung nalika showmetode conto disebut.
ditémbongkeun.bs.tooltip Kajadian ieu dipecat nalika tooltip parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé).
hide.bs.tooltip Kajadian ieu langsung dipecat nalika hidemetode conto parantos disebut.
hidden.bs.tooltip Kajadian ieu dipecat nalika tooltip parantos disumputkeun tina pangguna (bari ngantosan transisi CSS réngsé).
inserted.bs.tooltip Kajadian ieu dipecat sanggeus show.bs.tooltipkajadian nalika template tooltip geus ditambahkeun kana DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})