Laktawan sa panguna nga sulud Laktaw sa docs navigation
Check
in English

Mga tooltip

Dokumentasyon ug mga pananglitan alang sa pagdugang sa custom Bootstrap tooltips uban sa CSS ug JavaScript gamit ang CSS3 alang sa mga animation ug data-bs-attributes alang sa lokal nga pagtipig sa titulo.

Niini nga panid

Overview

Mga butang nga mahibal-an kung gamiton ang tooltip plugin:

  • Ang mga tooltip nagsalig sa ikatulo nga partido nga librarya nga Popper alang sa pagposisyon. Kinahanglan nimong iapil ang popper.min.js sa wala pa bootstrap.js, o gamita ang usa bootstrap.bundle.min.jsnga adunay Popper.
  • Ang mga tooltip kay nag-opt-in para sa mga rason sa performance, mao nga ikaw mismo ang mag-initialize niini .
  • Ang mga tooltip nga adunay zero-length nga mga titulo wala gayud ipakita.
  • Tinoa container: 'body'aron malikayan ang mga problema sa paghubad sa mas komplikado nga mga sangkap (sama sa among mga grupo sa input, mga grupo sa butones, ug uban pa).
  • Ang pag-trigger sa mga tooltip sa tinago nga mga elemento dili molihok.
  • Ang mga tooltip para sa .disabledo disabledmga elemento kinahanglang ma-trigger sa usa ka elemento sa wrapper.
  • Kung na-trigger gikan sa mga hyperlink nga nagsangkad sa daghang linya, ang mga tooltip masentro. Gamita white-space: nowrap;sa imong <a>s aron malikayan kini nga kinaiya.
  • Kinahanglang itago ang mga tooltip sa dili pa makuha ang mga katugbang nga elemento niini gikan sa DOM.
  • Ang mga tooltip mahimong ma-trigger salamat sa usa ka elemento sa sulod sa usa ka anino nga DOM.

Nakuha ang tanan? Nindot, tan-awon nato kung giunsa nila pagtrabaho ang pipila ka mga pananglitan.

Sa kasagaran, kini nga component naggamit sa built-in nga content sanitizer, nga nagtangtang sa bisan unsang HTML nga mga elemento nga dili klaro nga gitugutan. Tan-awa ang seksyon sa sanitizer sa among dokumentasyon sa JavaScript alang sa dugang nga mga detalye.
Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Mga pananglitan

I-enable ang mga tooltip

Sama sa gihisgutan sa ibabaw, kinahanglan nimo nga magsugod sa mga tooltip sa dili pa kini magamit. Usa ka paagi sa pagsugod sa tanan nga mga tooltip sa usa ka panid mao ang pagpili niini pinaagi sa ilang mga data-bs-togglehiyas, sama niini:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Pag-hover sa mga link sa ubos aron makita ang mga tooltip:

Ang teksto sa placeholder aron ipakita ang pipila ka inline nga mga link nga adunay mga tooltip. Kini karon lang filler, walay killer. Ang sulud nga gibutang dinhi aron lang masundog ang presensya sa tinuod nga teksto . Ug ang tanan aron lang mahatagan ka usa ka ideya kung unsa ang hitsura sa mga tooltip kung gigamit sa mga sitwasyon sa tinuod nga kalibutan. Mao nga hinaut nga nakita na nimo kung giunsa kini nga mga tooltip sa mga link mahimo’g molihok sa praktis, kung gamiton nimo kini sa imong kaugalingon nga site o proyekto.

html 
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>
Mobati nga gawasnon sa paggamit sa bisan hain titleo data-bs-titlesa imong HTML. Kung titlegigamit, awtomatik nga ilisan kini ni Popper data-bs-titlekung ang elemento gihatag.

Pasadya nga mga tooltip

Gidugang sa v5.2.0

Mahimo nimong ipasibo ang dagway sa mga tooltip gamit ang CSS variables . Nagbutang kami usa ka naandan nga klase data-bs-custom-class="custom-tooltip"aron masakop ang among naandan nga hitsura ug gamiton kini aron ma-override ang usa ka lokal nga variable sa CSS.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}
html 
<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Direksyon

Hover ibabaw sa mga buton sa ubos aron makita ang upat ka mga tooltip nga direksyon: ibabaw, tuo, ubos, ug wala. Ang mga direksyon gisalamin kung gigamit ang Bootstrap sa RTL.

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

Ug uban sa naandan nga HTML gidugang:

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

Uban sa SVG:

CSS

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang mga tooltip karon naggamit sa lokal nga CSS variables .tooltipalang sa gipaayo nga real-time nga pag-customize. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};

Sass variables

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

Paggamit

Ang tooltip plugin nagmugna og sulod ug markup sa panginahanglan, ug sa default nagbutang sa mga tooltip human sa ilang trigger nga elemento.

I-trigger ang tooltip pinaagi sa JavaScript:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)
Pag- awas autougscroll

Ang posisyon sa tooltip mosulay sa awtomatikong pag-usab kung ang usa ka ginikanan nga sudlanan adunay overflow: autoo overflow: scrollgusto sa among .table-responsive, apan gitipigan gihapon ang posisyon sa orihinal nga pagbutang. Aron masulbad kini, itakda ang boundarykapilian (alang sa flip modifier gamit ang popperConfigopsyon) sa bisan unsang HTMLElement aron ma-override ang default value, 'clippingParents', sama sa document.body:

const tooltip = new bootstrap.Tooltip('#example', {
  boundary: document.body // or document.querySelector('#boundary')
})

Markup

Ang gikinahanglan nga markup para sa tooltip kay usa lang ka dataattribute ug titlesa HTML nga elemento gusto nimo nga naay tooltip. Ang nahimo nga markup sa usa ka tooltip kay yano ra, bisan kung kini nanginahanglan usa ka posisyon (sa default, gitakda topsa plugin).

Ang paghimo sa mga tooltip nga magamit alang sa keyboard ug assistive nga mga tiggamit sa teknolohiya

Kinahanglan nga imong idugang ang mga tooltip sa HTML nga mga elemento nga tradisyonal nga mapunting sa keyboard ug interactive (sama sa mga link o mga kontrol sa porma). Bisan tuod ang arbitraryong HTML nga mga elemento (sama sa <span>s) mahimong mapokus pinaagi sa pagdugang sa tabindex="0"hiyas, kini makadugang sa posibleng makalagot ug makalibog nga mga paghunong sa tab sa dili interactive nga mga elemento alang sa mga tiggamit sa keyboard, ug kadaghanan sa mga teknolohiya sa pagtabang sa pagkakaron wala magpahibalo sa tooltip niini nga sitwasyon. Dugang pa, ayaw pagsalig lamang hoveringon nga gatilyo sa imong tooltip, tungod kay kini maghimo sa imong mga tooltip nga imposible nga ma-trigger alang sa mga tiggamit sa keyboard.

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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>

Mga disabled nga elemento

Ang mga elemento nga adunay disabledattribute dili interactive, nagpasabot nga ang mga user dili maka-focus, maka-hover, o maka-click niini aron ma-trigger ang tooltip (o popover). Isip usa ka workaround, gusto nimong i-trigger ang tooltip gikan sa usa ka wrapper <div>o <span>, mas maayo nga gihimo nga keyboard-focusable gamit ang tabindex="0".

html 
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Mga kapilian

Ingon nga ang mga kapilian mahimong ipasa pinaagi sa data attributes o JavaScript, mahimo nimong idugang ang ngalan sa opsyon sa data-bs-, sama sa data-bs-animation="{value}". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa " CamelCase " ngadto sa " kebab-case " kung ipasa ang mga kapilian pinaagi sa mga attribute sa datos. Pananglitan, gamita data-bs-custom-class="beautifier"imbes nga data-bs-customClass="beautifier".

Ingon sa Bootstrap 5.2.0, ang tanan nga mga sangkap nagsuporta sa usa ka eksperimento nga gireserba nga kinaiya sa datos data-bs-confignga mahimo’g ibutang ang yano nga pag-configure sa sangkap ingon usa ka string sa JSON. Kung ang usa ka elemento adunay data-bs-config='{"delay":0, "title":123}'ug data-bs-title="456"mga hiyas, ang katapusan titlenga kantidad mao ang 456ug ang bulag nga mga hiyas sa datos mag-override sa mga kantidad nga gihatag sa data-bs-config. Dugang pa, ang naglungtad nga mga hiyas sa datos makahimo sa pagbutang sa mga kantidad sa JSON sama sa data-bs-delay='{"show":0,"hide":150}'.

Timan-i nga alang sa mga rason sa seguridad ang sanitize, sanitizeFn, ug allowListmga opsyon dili mahatag gamit ang data attributes.
Ngalan Matang Default Deskripsyon
allowList butang Default nga bili Ang butang nga adunay gitugotan nga mga hiyas ug mga tag.
animation boolean true Ibutang ang CSS fade transition sa tooltip.
boundary string, elemento 'clippingParents' Ang utlanan sa pagpugong sa pag-awas sa tooltip (magamit lamang sa preventOverflow modifier sa Popper). Sa kasagaran, kini 'clippingParents'ug mahimong modawat ug HTMLElement reference (pinaagi sa JavaScript lamang). Alang sa dugang nga impormasyon tan-awa ang Popper's detectOverflow docs .
container hilo, elemento, bakak false Gidugang ang tooltip sa usa ka piho nga elemento. Pananglitan: container: 'body'. Kini nga kapilian labi ka mapuslanon tungod kay kini nagtugot kanimo sa pagpahimutang sa tooltip sa dagan sa dokumento duol sa nag-trigger nga elemento - nga makapugong sa tooltip gikan sa paglutaw gikan sa nag-trigger nga elemento sa panahon sa pagbag-o sa bintana.
customClass string, function '' Idugang ang mga klase sa tooltip kung kini gipakita. Timan-i nga kini nga mga klase idugang dugang sa bisan unsang klase nga gitakda sa template. Para makadugang ug daghang klase, ibulag sila sa mga espasyo: 'class-1 class-2'. Mahimo usab nimo nga ipasa ang usa ka function nga kinahanglan ibalik ang usa ka string nga adunay dugang nga mga ngalan sa klase.
delay numero, butang 0 Paglangan sa pagpakita ug pagtago sa tooltip (ms)—dili magamit sa manual trigger type. Kung adunay gihatag nga numero, ang paglangan magamit sa parehas nga pagtago/pagpakita. Ang istruktura sa butang mao ang: delay: { "show": 500, "hide": 100 }.
fallbackPlacements han-ay ['top', 'right', 'bottom', 'left'] Ipasabot ang fallback placement pinaagi sa paghatag ug lista sa mga placement sa array (sumala sa gusto). Alang sa dugang nga impormasyon tan-awa ang Popper's behavior docs .
html boolean false Tugoti ang HTML sa tooltip. Kung tinuod, ang mga HTML tag sa tooltip's titleiga-render sa tooltip. Kung bakak, innerTextgamiton ang propyedad sa pagsal-ot sa sulod sa DOM. Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS.
offset array, hilo, function [0, 0] Offset sa tooltip kalabot sa target niini. Mahimo nimong ipasa ang usa ka hilo sa mga hiyas sa datos nga adunay mga kantidad nga gibulag sa comma sama sa: data-bs-offset="10,20". Kung ang usa ka function gigamit aron mahibal-an ang offset, kini gitawag nga adunay usa ka butang nga adunay sulud nga popper placement, ang reference, ug popper rects isip unang argumento niini. Ang triggering element nga DOM node gipasa isip ikaduhang argumento. Kinahanglang ibalik sa function ang array nga adunay duha ka numero: skidding , distance . Alang sa dugang nga impormasyon tan-awa ang Popper's offset docs .
placement string, function 'top' Giunsa pagpahimutang ang tooltip: awto, ibabaw, ubos, wala, tuo. Kung autogitino, kini dinamikong i-reorient ang tooltip. Kung ang usa ka function gigamit aron mahibal-an ang pagbutang, kini gitawag nga adunay tooltip nga DOM node ingon ang una nga argumento ug ang hinungdan nga elemento nga DOM node ingon ikaduha. Ang thiskonteksto gitakda sa tooltip nga pananglitan.
popperConfig null, butang, function null Aron usbon ang default Popper config sa Bootstrap, tan-awa ang configuration sa Popper . Kung ang usa ka function gigamit sa paghimo sa Popper configuration, kini gitawag uban sa usa ka butang nga adunay sulod sa Bootstrap nga default Popper configuration. Makatabang kini kanimo sa paggamit ug paghiusa sa default sa imong kaugalingon nga configuration. Kinahanglang ibalik sa function ang usa ka butang sa pag-configure alang sa Popper.
sanitize boolean true I-enable o i-disable ang sanitization. Kung gi-aktibo 'template', 'content'ug 'title'ang mga kapilian ma-sanitize.
sanitizeFn null, function null Dinhi mahimo nimong ihatag ang imong kaugalingon nga sanitize function. Mahimong mapuslanon kini kung gusto nimo nga mogamit usa ka gipahinungod nga librarya aron mahimo ang sanitization.
selector string, bakak false Kung gihatag ang usa ka tigpili, ang mga butang sa tooltip itugyan sa gitakda nga mga target. Sa praktis, gigamit kini aron magamit usab ang mga tooltip sa dinamikong pagdugang sa mga elemento sa DOM ( jQuery.onsuporta). Tan-awa kini nga isyu ug usa ka pananglitan nga makapaayo .
template hilo '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' Base HTML nga gamiton sa paghimo sa tooltip. Ang tooltip's titlei-inject sa .tooltip-inner. .tooltip-arrowmahimong pana sa tooltip. Ang pinakagawas nga elemento sa wrapper kinahanglan adunay .tooltipklase ug role="tooltip".
title string, elemento, function '' Default nga bili sa titulo kung wala ang titleattribute. Kung ang usa ka function gihatag, kini tawgon uban ang thisreference set sa elemento nga gilakip sa popover.
trigger hilo 'hover focus' Giunsa ma-trigger ang tooltip: click, hover, focus, manual. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna. 'manual'nagpakita nga ang tooltip ma-trigger sa programmatically pinaagi sa .tooltip('show'), .tooltip('hide')ug .tooltip('toggle')mga pamaagi; kini nga bili dili mahimong ikombinar sa bisan unsa nga lain nga trigger. 'hover'sa iyang kaugalingon moresulta sa mga tooltip nga dili ma-trigger pinaagi sa keyboard, ug kinahanglan lang gamiton kung ang mga alternatibong pamaagi sa paghatud sa parehas nga kasayuran alang sa mga tiggamit sa keyboard naa.

Mga hiyas sa datos alang sa indibidwal nga mga tooltip

Ang mga kapilian alang sa indibidwal nga mga tooltip mahimong ipiho pinaagi sa paggamit sa mga hiyas sa datos, ingon sa gipatin-aw sa ibabaw.

Paggamit sa function sapopperConfig 

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

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

Pamaagi Deskripsyon
disable Gitangtang ang abilidad nga ipakita ang tooltip sa usa ka elemento. Mapakita lang ang tooltip kung kini ma-enable pag-usab.
dispose Pagtago ug pagguba sa tooltip sa usa ka elemento (Pagtangtang sa gitipigan nga datos sa elemento sa DOM). Ang mga tooltip nga naggamit sa delegasyon (nga gimugna gamit ang selectoropsyon ) dili mahimong tagsa-tagsa nga gub-on sa descendant trigger elements.
enable Naghatag sa tooltip sa elemento sa abilidad nga ipakita. Ang mga tooltip gipalihok pinaagi sa default.
getInstance Static nga pamaagi nga nagtugot kanimo nga makuha ang tooltip nga pananglitan nga adunay kalabotan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.
getOrCreateInstance Static nga pamaagi nga nagtugot kanimo nga makuha ang tooltip nga pananglitan nga adunay kalabotan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.
hide Nagtago sa tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang tooltip gitago (ie sa wala pa hidden.bs.tooltipmahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip.
setContent Naghatag ug paagi aron mabag-o ang sulud sa tooltip pagkahuman sa pagsugod niini.
show Nagpadayag sa tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang tooltip (ie sa wala pa shown.bs.tooltipmahitabo ang panghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip. Ang mga tooltip nga adunay zero-length nga mga titulo wala gayud ipakita.
toggle I-toggle ang tooltip sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang tooltip gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.tooltipo hidden.bs.tooltippanghitabo). Giisip kini nga "manwal" nga pag-trigger sa tooltip.
toggleEnabled I-toggle ang abilidad sa tooltip sa usa ka elemento nga ipakita o itago.
update Gi-update ang posisyon sa tooltip sa usa ka elemento. 
const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })
Ang setContentpamaagi modawat ug objectargumento, diin ang matag property-key kay balido nga stringtigpili sulod sa popover template, ug ang matag may kalabutan nga property-value mahimong string| element| function| null

Mga panghitabo

Panghitabo Deskripsyon
hide.bs.tooltip Kini nga panghitabo gipabuto dayon kung ang hidepamaagi sa pananglitan gitawag na.
hidden.bs.tooltip Kini nga panghitabo gipabuto kung ang popover nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
inserted.bs.tooltip Kini nga panghitabo gipabuto pagkahuman sa show.bs.tooltippanghitabo kung ang template sa tooltip gidugang sa DOM.
show.bs.tooltip Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
shown.bs.tooltip Kini nga panghitabo gipabuto kung ang popover nahimo nang makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). 
const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()