in English

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 pikeun positioning. Anjeun kedah ngalebetkeun popper.min.js sateuacan bootstrap.js atanapi nganggo bootstrap.bundle.min.js/ bootstrap.bundle.jsanu ngandung Popper 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 unsur 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.
Sacara standar, komponén ieu nganggo sanitizer eusi anu diwangun, anu ngaleungitkeun unsur HTML anu henteu diidinan sacara eksplisit. Tingali bagian sanitizer dina dokuméntasi JavaScript kami pikeun langkung rinci.
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:

Téks pananda tempat pikeun nunjukkeun sababaraha tautan inline sareng tooltips. Ieu ayeuna ngan filler, euweuh killer. Eusi disimpen di dieu ngan pikeun meniru ayana téks nyata . Sareng sadaya éta ngan ukur pikeun masihan anjeun ide kumaha tooltip bakal katingali nalika dianggo dina kaayaan dunya nyata. Janten mugia anjeun ayeuna tos ningali kumaha tooltips ieu dina tautan tiasa dianggo dina prakna, saatos anjeun ngagunakeunana dina situs atanapi proyek anjeun nyalira .

Hover dina tombol di handap pikeun ningali 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 (sapertos <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, sarta paling téknologi mantuan ayeuna teu ngumumkeun tooltip dina situasi 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="".

Catet yén alesan kaamanan sanitize, sanitizeFnsarta whiteListpilihan teu bisa disadiakeun maké atribut data.
Ngaran Tipe Default Katerangan
animasi boolean leres Larapkeun transisi fade CSS kana tooltip
wadahna string | 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 string | 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 string | 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 string | unsur | fungsi ''

Nilai judul standar upami titleatribut teu aya.

Upami fungsina dipasihkeun, éta bakal disebat ku thisset rujukanna kana 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 | string | fungsi 0

Offset tooltip relatif ka target na.

Lamun fungsi dipaké pikeun nangtukeun offset, mangka disebut obyék nu ngandung data offset salaku argumen munggaran. Fungsina kedah ngabalikeun obyék kalayan struktur anu sami. The triggering unsur DOM titik diliwatan salaku argumen kadua.

Kanggo inpo nu leuwih lengkep tingal docs offset Popper urang .
fallbackPlacement string | susunan 'malik' Ngidinan pikeun nangtukeun posisi Popper anu bakal dianggo dina fallback. Kanggo inpo nu leuwih lengkep tingal docs kabiasaan Popper urang
customClass string | fungsi ''

Tambahkeun kelas kana tooltip nalika dipintonkeun. Catet yén kelas-kelas ieu bakal ditambah salian ti kelas-kelas anu aya dina citakan. Pikeun nambahkeun sababaraha kelas, misahkeun aranjeunna kalayan spasi: 'a b'.

Anjeun oge bisa lulus fungsi nu kudu balik a string tunggal ngandung ngaran kelas tambahan.
wates string | unsur 'scrollParent' wates konstrain mudal tina tooltip. Narima nilai 'viewport', 'window', 'scrollParent', atawa rujukan HTMLElement (JavaScript wungkul). Kanggo inpo nu leuwih lengkep tingal Popper urang preventOverflow docs .
ngabersihan boolean leres Aktipkeun atanapi mareuman sanitasi. Upami diaktipkeun 'template'sareng 'title'pilihan bakal disanitasi. Tingali bagian sanitizer dina dokuméntasi JavaScript kami .
Daptar bodas objék Nilai standar Obyék anu ngandung atribut sareng tag anu diidinan
ngabersihanFn null | fungsi null Di dieu anjeun tiasa nyayogikeun fungsi sanitasi anjeun nyalira. Ieu tiasa mangpaat upami anjeun resep ngagunakeun perpustakaan khusus pikeun ngalaksanakeun sanitasi.
popperConfig null | objék null Pikeun ngarobah konfigurasi Popper standar Bootstrap, tingali konfigurasi Popper

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 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...
})