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 3rd party library nga Popper para sa pagpoposisyon. Kinahanglan nimong iapil ang popper.min.js sa wala pa ang bootstrap.js o gamiton bootstrap.bundle.min.js/ bootstrap.bundle.jsnga adunay sulud nga Popper aron magamit ang mga tooltip!
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.

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 .

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

Pananglitan: I-enable ang mga tooltip bisan asa

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:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Mga pananglitan

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

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

Ug uban sa naandan nga HTML gidugang:

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

Uban sa SVG:

Sass

Mga variable

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

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:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

Pag- awas `auto`ug`scroll`

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:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  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" 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".

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-bs-, sama sa data-bs-animation="". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa camelCase hangtod sa kebab-case kung ipasa ang mga kapilian pinaagi sa mga hiyas sa datos. Pananglitan, imbes gamiton ang data-bs-customClass="beautifier", gamita ang data-bs-custom-class="beautifier".

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
`animation`	boolean	`true`	Ibutang ang CSS fade transition sa tooltip
`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.
`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 }`
`html`	boolean	`false`	Tugoti ang HTML sa tooltip. Kung tinuod, ang mga HTML tag sa tooltip's `title`iga-render sa tooltip. Kung bakak, `innerText`gamiton ang propyedad sa pagsal-ot sa sulod sa DOM. Gamit ug text kung nabalaka ka bahin sa mga pag-atake sa XSS.
`placement`	hilo \| function	`'top'`	Giunsa pagpahimutang ang tooltip - awto \| ibabaw \| ubos \| wala \| husto. Kung `auto`gitakda, 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 `this`konteksto gitakda sa tooltip nga pananglitan.
`selector`	hilo \| 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.on`suporta). Tan-awa kini ug usa ka pananglitan nga impormatibo .
`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 `title`i-inject sa `.tooltip-inner`. `.tooltip-arrow`mahimong pana sa tooltip. Ang pinakagawas nga elemento sa wrapper kinahanglan adunay `.tooltip`klase ug `role="tooltip"`.
`title`	hilo \| elemento \| function	`''`	Default nga bili sa titulo kung wala ang `title`attribute. Kung gihatag ang usa ka function, tawgon kini kauban ang `this`reference set sa elemento nga gilakip sa tooltip.
`trigger`	hilo	`'hover focus'`	Giunsa pag-trigger ang tooltip - pag-klik \| hover \| focus \| manwal. Mahimo nimong ipasa ang daghang mga trigger; ibulag sila sa usa ka luna. `'manual'`nagpakita nga ang tooltip ma-trigger sa programmatically pinaagi sa `.show()`, `.hide()`ug `.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.
`fallbackPlacements`	han-ay	`['top', 'right', 'bottom', 'left']`	Ipasabot ang fallback nga mga placement pinaagi sa paghatag ug listahan sa mga placement sa array (sumala sa gusto). Alang sa dugang nga impormasyon tan-awa ang Popper's behavior docs
`boundary`	hilo \| 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 .
`customClass`	hilo \| 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.
`sanitize`	boolean	`true`	I-enable o i-disable ang sanitization. Kung gi-aktibo `'template'`ug `'title'`ang mga kapilian ma-sanitize. Tan-awa ang seksyon sa sanitizer sa among dokumentasyon sa JavaScript .
`allowList`	butang	Default nga bili	Ang butang nga adunay gitugotan nga mga hiyas ug mga tag
`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.
`offset`	han-ay \| 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 .
`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.

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 sa`popperConfig`

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var 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 .

ipakita

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.

tooltip.show()

itago

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.

tooltip.hide()

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.

tooltip.toggle()

ilabay

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.

tooltip.dispose()

makahimo

Naghatag sa tooltip sa elemento sa abilidad nga ipakita. Ang mga tooltip gipalihok pinaagi sa default.

tooltip.enable()

disable

Gitangtang ang abilidad nga ipakita ang tooltip sa usa ka elemento. Mapakita lang ang tooltip kung kini ma-enable pag-usab.

tooltip.disable()

toggleEnabled

I-toggle ang abilidad sa tooltip sa usa ka elemento nga ipakita o itago.

tooltip.toggleEnabled()

update

Gi-update ang posisyon sa tooltip sa usa ka elemento.

tooltip.update()

getInstance

Static nga pamaagi nga nagtugot kanimo nga makuha ang tooltip nga pananglitan nga adunay kalabotan sa usa ka elemento sa DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Static nga pamaagi nga nagtugot kanimo nga makuha ang tooltip nga pananglitan nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Mga panghitabo

Uri sa panghitabo	Deskripsyon
`show.bs.tooltip`	Kini nga panghitabo nagdilaab dayon kung ang `show`pamaagi sa pananglitan gitawag.
`shown.bs.tooltip`	Kini nga panghitabo gipabuto kung ang tooltip nahimo nang makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
`hide.bs.tooltip`	Kini nga panghitabo gipabuto dayon kung ang `hide`pamaagi sa pananglitan gitawag na.
`hidden.bs.tooltip`	Kini nga panghitabo gipabuto kung ang tooltip 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.tooltip`panghitabo kung ang template sa tooltip gidugang sa DOM.

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()