Switsundzuxo swa Switirhisiwa

Matsalwa na swikombiso swo engetela switsundzuxo swa switirhisiwa swa Bootstrap swa ntolovelo hi CSS na JavaScript hi ku tirhisa CSS3 eka swifaniso leswi hanyaka na data-bs-attributes ya vuhlayiselo bya swihloko swa laha kaya.

Eka tluka leri

Nkatsakanyo

Swilo leswi u faneleke u swi tiva loko u tirhisa xiengetelo xa xitirhisiwa:

Switirhisiwa swi titshege hi layiburari ya 3rd party Popper eka xiyimo. U fanele ku katsa popper.min.js emahlweni ka bootstrap.js kumbe u tirhisa bootstrap.bundle.min.js/ bootstrap.bundle.jsleyi nga na Popper leswaku switsundzuxo swa switirhisiwa swi tirha!
Switsundzuxo swa switirhisiwa i ku hlawula ku nghena hikwalaho ka swivangelo swa matirhelo, hikwalaho u fanele ku swi sungula hi wexe .
Switsundzuxo swa switirhisiwa leswi nga ni swihloko swa ku leha ka zero a swi si tshama swi kombisiwa.
Boxa container: 'body'ku papalata swiphiqo swa ku hundzuluxela eka swiphemu leswi rharhanganeke swinene (ku fana na mintlawa ya hina ya ku nghenisa, mintlawa ya swikomba-nkarhi, na swin’wana).
Ku hlohlotela switsundzuxo eka swiaki leswi fihliweke a swi nge tirhi.
Switsundzuxo swa switirhisiwa swa .disabledkumbe disabledswiaki swi fanele ku pfuriwa eka elemente ya xifunengeto.
Loko yi pfuriwa ku suka eka ti-hyperlink leti hlanganisaka milayeni yo tala, switsundzuxo swa switirhisiwa swi ta va swi ri exikarhi. Tirhisa white-space: nowrap;eka s ya wena <a>ku papalata mahanyelo lawa.
Switsundzuxo swa switirhisiwa swi fanele ku fihliwa swiaki swa swona leswi fambelanaka swi nga si susiwa eka DOM.
Switirhisiwa swi nga pfuriwa hi ku khensa elemente endzeni ka DOM ya ndzhuti.

Hi ku tiyimisela, xiphemu lexi xi tirhisa xibasisi xa nhundzu lexi akiweke endzeni, lexi hluvulaka swiaki swihi na swihi swa HTML leswi nga pfumeleriwangiki hi ku kongoma. Vona xiyenge xa sanitizer eka matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala.

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Xana u na swona hinkwaswo sweswo? Great, a hi voneni ndlela leyi va tirhaka ha yona hi swikombiso swin’wana.

Xikombiso: Endla leswaku switsundzuxo swa switirhisiwa swi tirha hinkwako-nkwako

Ndlela yin’wana yo sungula switsundzuxo hinkwaswo swa switirhisiwa eka tluka ku nga va ku swi hlawula hi ku ya hi data-bs-togglemfanelo ya swona:

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

Swikombiso

Hover ehenhla ka swihlanganisi leswi nga laha hansi ku vona switsundzuxo swa switirhisiwa:

Hover ehenhla ka swikomba-nkarhi leswi nga laha hansi leswaku u vona swiletelo swa mune swa switsundzuxo swa switirhisiwa: ehenhla, exineneni, ehansi ni le ximatsi. Swiletelo swi kombisiwa hi xivoni loko u tirhisa Bootstrap eka 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>

Naswona hi HTML ya ntolovelo leyi engeteriweke:

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

Hi SVG: .

Sass

Swilo leswi cinca-cincaka

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

Matirhiselo

Plugin ya xitsundzuxo xa switirhisiwa yi humesa nhundzu na ku fungha hi ku landza xilaveko, naswona hi ku tiyimisela yi veka switsundzuxo endzhaku ka elemente ya swona ya xihlohloteri.

Pfuxeta xitsundzuxo xa xitirhisiwa hi ku tirhisa JavaScript:

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

Ku tala ka mati `auto`na`scroll`

Xiyimo xa xitirhisiwa xi ringeta ku cinca hi ku tisungulela loko xikhomela-ndhawu xa mutswari xi ri na overflow: autokumbe overflow: scrollku fana na xa hina .table-responsive, kambe xa ha hlayisa xiyimo xa ndhawu yo sungula. Ku lulamisa leswi, veka boundarynhlawulo (eka mucinci wa flip hi ku tirhisa popperConfignhlawulo) eka HTMLElement yihi na yihi ku tlula ntikelo wa xiviri, 'clippingParents', ku fana na document.body:

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

Ku fungha swilo

Ximaki lexi lavekaka xa xitsundzuxo xa xitirhisiwa i dataxihlawulekisi ntsena naswona titleeka elemente ya HTML u navela ku va na xitsundzuxo xa xitirhisiwa. Ku fungha loku endliweke ka xitsundzuxo xa xitirhisiwa ku olovile swinene, hambi leswi ku lavaka xiyimo (hi ku tiyimisela, ku vekiwile eka tophi xiengetelo).

Ku endla leswaku switsundzuxo swi tirha eka vatirhisi va khibhodi na thekinoloji yo pfuneta

U fanele ku engetela ntsena switsundzuxo swa switirhisiwa eka swiaki swa HTML leswi hi ntolovelo swi kongomisiweke eka khibhodi na ku tirhisana (ku fana na swihlanganisi kumbe vulawuri bya fomo). Hambileswi swiaki swa HTML swa ku tihlawulela (swo tanihi <span>s) swi nga endliwaka swi kongomisiwa hi ku engetela tabindex="0"xihlawulekisi, leswi swi ta engetela ku yima ka tithebhu loku nga ha hlundzukisaka ni ku pfilunganya eka swiaki leswi nga riki swa vuhlanganisi eka vatirhisi va khibhodi, naswona thekinoloji yo tala leyi pfunaka sweswi a yi tivisi xitsundzuxo xa xitirhisiwa eka xiyimo lexi. Ku engetela kwalaho, u nga titshegi ntsena hi hovertanihi xihlohloteri xa xitsundzuxo xa wena xa switirhisiwa, tanihi leswi leswi swi nga ta endla leswaku switsundzuxo swa wena swi nga koteki ku swi hlohlotela eka vatirhisi va khibhodi.

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

Swiaki leswi lamaleke

Swiaki leswi nga na disabledxihlawulekisi a swi tirhisani, leswi vulaka leswaku vatirhisi a va nge swi koti ku kongomisa, ku hover, kumbe ku swi tsindziyela ku pfuxa xitirhisiwa (kumbe popover). Tanihi ndlela yo tshungula, u ta lava ku pfuxa xitsundzuxo xa xitirhisiwa ku suka eka xifunengeto <div>kumbe <span>, hi ndlela leyinene yi endliwe leswaku yi kongomisiwa eka khibhodi hi ku tirhisa 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>

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-bs-, tanihi le ka data-bs-animation="". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka camelCase ku ya eka kebab-case loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, ematshan’weni yo tirhisa data-bs-customClass="beautifier", tirhisa data-bs-custom-class="beautifier".

Xiya leswaku hikwalaho ka swivangelo swa vuhlayiseki sanitize, sanitizeFn, na allowListswihlawulekisi a swi nge nyikiwi hi ku tirhisa swihlawulekisi swa data.

Vito	Muxaka	Ku tlula	Nhlamuselo
`animation`	xitsonga xitsonga	`true`	Tirhisa ku cinca ka ku fada ka CSS eka xitsundzuxo xa xitirhisiwa
`container`	ntambhu ya xirhendzevutani \| xiaki xa \| vunwa	`false`	Ku engetela xitsundzuxo xa xitirhisiwa eka elemente yo karhi. Xikombiso: `container: 'body'`. Nhlawulo lowu wu pfuna ngopfu hikuva wu ku pfumelela ku veka xitsundzuxo xa xitirhisiwa eka ku khuluka ka tsalwa ekusuhi na xiaki lexi pfuxaka - leswi nga ta sivela xitsundzuxo xa xitirhisiwa ku papamala ekule na xiaki xo hlohlotela hi nkarhi wa ku cinca sayizi ya fasitere.
`delay`	nomboro \| nchumu	`0`	Ku hlwela ku kombisa na ku tumbeta xitsundzuxo xa xitirhisiwa (ms) - a swi tirhi eka muxaka wa xihlohloteri xa manual Loko nomboro yi nyikiwile, ku hlwela ku tirhisiwa eka havumbirhi bya ku fihla/kombisa Xivumbeko xa nchumu i:`delay: { "show": 500, "hide": 100 }`
`html`	xitsonga xitsonga	`false`	Pfumelela HTML eka xitsundzuxo xa switirhisiwa. Loko ku ri ntiyiso, tithegi ta HTML eka tooltip's `title`ti ta kombisiwa eka tooltip. Loko ku ri mavunwa, `innerText`nhundzu yi ta tirhisiwa ku nghenisa nhundzu eka DOM. Tirhisa tsalwa loko u vilerisiwa hi nhlaselo wa XSS.
`placement`	ntambhu ya xirhendzevutani \| ntirho	`'top'`	Ndlela yo veka xitirhisiwa - auto \| ehenhla \| ehansi \| ximatsi \| mfanelo. Loko `auto`swi boxiwile, yi ta tlhela yi kongomisa xitsundzuxo xa xitirhisiwa hi ndlela leyi cinca-cincaka. Loko ntirho wu tirhisiwa ku kumisisa ku vekiwa, wu vitaniwa hi tooltip DOM node tanihi argument ya wona yo sungula na triggering element DOM node tanihi ya vumbirhi. Mongo `this`wu vekiwile eka xikombiso xa xitirhisiwa.
`selector`	ntambhu ya xirhendzevutani \| vunwa	`false`	Loko ku nyikiwile xihlawulekisi, swilo swa xitsundzuxo xa switirhisiwa swi ta nyikiwa swikongomelo leswi boxiweke. Hi ku tirhisa, leswi swi tirhisiwa ku tlhela swi tirhisa switsundzuxo swa switirhisiwa eka swiaki swa DOM leswi engeteriweke hi ndlela leyi cinca-cincaka ( `jQuery.on`nseketelo). Vona leswi ni xikombiso lexi dyondzisaka .
`template`	ntambu	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	Base HTML ku tirhisa loko u endla xitirhisiwa. Ti tooltip's `title`ti ta cheriwa eka `.tooltip-inner`. `.tooltip-arrow`yi ta va museve wa xitirhisiwa. Xiphemu xa le handle xa xifunengeto xi fanele ku va na `.tooltip`tlilasi na `role="tooltip"`.
`title`	ntambhu ya xirhendzevutani \| xiaki xa \| ntirho	`''`	Nhlayo ya xihloko xa xiviri loko `title`xihlawulekisi xi nga ri kona. Loko ntirho wu nyikiwile, wu ta vitaniwa hi `this`sete ya wona ya swikombo eka elemente leyi xitsundzuxo xa xitirhisiwa xi khomanisiweke na yona.
`trigger`	ntambu	`'hover focus'`	Ndlela leyi tooltip yi pfuriwaka ha yona - click \| hover \| ku kongomisa \| manyuwali. U nga ha hundza swihlohloteri swo tala; va hambanise hi xivandla. `'manual'`yi kombisa leswaku xitsundzuxo xa xitirhisiwa xi ta pfuriwa hi phurogireme hi ku tirhisa `.show()`, `.hide()`na `.toggle()`tindlela; ntikelo lowu a wu nge hlanganisiwi na xihlohloteri xin’wana. `'hover'`hi yoxe swi ta endla leswaku ku va na switsundzuxo swa switirhisiwa leswi nga pfuriwiki hi ku tirhisa khibhodi, naswona swi fanele ku tirhisiwa ntsena loko tindlela tin’wana to hundzisela rungula leri fanaka eka vatirhisi va khibhodi ti ri kona.
`fallbackPlacements`	array ya xirhendzevutani	`['top', 'right', 'bottom', 'left']`	Hlamusela swivandla swa fallback hi ku nyika nxaxamelo wa swivandla eka array (hi ku landzelelana ka ku tsakela). Ku kuma vuxokoxoko byo tala languta eka Popper's behavior docs
`boundary`	ntambhu ya xirhendzevutani \| nchumu	`'clippingParents'`	Ndzilakano wa xipimelo xa ku khuluka wa xitsundzuxo xa xitirhisiwa (wu tirha ntsena eka mucinci wa Popper wa preventOverflow). Hi ku tiyimisela i `'clippingParents'`naswona yi nga amukela xikombo xa HTMLElement (hi ku tirhisa JavaScript ntsena). Ku kuma vuxokoxoko byo tala languta eka Popper's detectOverflow docs .
`customClass`	ntambhu ya xirhendzevutani \| ntirho	`''`	Engetela titlilasi eka xitsundzuxo xa switirhisiwa loko xi kombisiwa. Xiya leswaku titlilasi leti ti ta engeteriwa ku engetela eka titlilasi tihi na tihi leti boxiweke eka xifaniso. Ku engetela titlilasi to tala, ti hambanise hi swivandla: `'class-1 class-2'`. U nga ha tlhela u hundzisela ntirho lowu faneleke ku vuyisa ntambhu yin’we leyi nga na mavito ya titlilasi yo engetela.
`sanitize`	xitsonga xitsonga	`true`	Endla leswaku ku tirhisiwa kumbe ku tshikisa ku basisiwa. Loko yi tirhisiwa `'template'`na `'title'`ti options ti ta sanitized. Vona xiyenge xa sanitizer eka matsalwa ya hina ya JavaScript .
`allowList`	nchumu	Nhlayo ya xiviri	Nchumu lowu nga na swihlawulekisi leswi pfumeleriweke na tithegi
`sanitizeFn`	null \| ntirho	`null`	Laha unga phakela ntirho wa wena wa sanitize. Leswi swinga pfuna loko u tsakela ku tirhisa layiburari leyi tinyiketeleke ku endla ku basisiwa.
`offset`	xirhendzevutani \| ntambhu ya xirhendzevutani \| ntirho	`[0, 0]`	Ku hambanisiwa ka xitsundzuxo xa xitirhisiwa loko xi pimanisiwa na xikongomelo xa xona. U nga hundza ntambhu eka swihlawulekisi swa datha hi mimpimo leyi hambanisiweke hi khoma ku fana na:`data-bs-offset="10,20"` Loko ntirho wu tirhisiwa ku kumisisa offset, wu vitaniwa hi nchumu lowu nga na popper placement, reference, na popper rects tani hi argument ya wona yo sungula. Node ya DOM ya elemente leyi hlohlotelaka yi hundziseriwa tanihi argument ya vumbirhi. Ntirho wu fanele ku vuyisa array leyi nga na tinomboro timbirhi: .`[skidding, distance]` Ku kuma vuxokoxoko byo tala languta eka Popper's offset docs .
`popperConfig`	null \| nchumu \| ntirho	`null`	Ku cinca xivumbeko xa Popper xa xiviri xa Bootstrap, vona xivumbeko xa Popper . Loko ntirho wu tirhisiwa ku tumbuluxa xivumbeko xa Popper, wu vitaniwa hi nchumu lowu nga na xivumbeko xa Popper xa xiviri xa Bootstrap. Swi ku pfuna ku tirhisa ni ku hlanganisa leswi nga riki swa xiviri ni xivumbeko xa wena. Ntirho wu fanele ku vuyisa nchumu wa vuhlanganisi bya Popper.

Swihlawulekisi swa datha swa switsundzuxo swa switirhisiwa swa munhu hi xiyexe

Swihlawulekisi swa switsundzuxo swa switirhisiwa swa munhu hi xiyexe swi nga boxiwile hi ndlela yin’wana hi ku tirhisa swihlawulekisi swa datha, tanihilaha swi hlamuseriweke hakona laha henhla.

Ku tirhisa ntirho na`popperConfig`

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

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

kombisa

Ku paluxa xitsundzuxo xa xitirhisiwa xa elemente. Ku tlhelela eka mufoyini xitsundzuxo xa xitirhisiwa xi nga si kombisiwa hakunene (i.e. shown.bs.tooltipxiendlakalo xi nga si humelela). Leswi swi tekiwa tanihi ku pfuxa “manual” ka xitsundzuxo xa xitirhisiwa. Switsundzuxo swa switirhisiwa leswi nga ni swihloko swa ku leha ka zero a swi si tshama swi kombisiwa.

tooltip.show()

tumbela

Ku fihla xitsundzuxo xa xitirhisiwa xa elemente. Ku tlhelela eka mufoyini xitsundzuxo xa xitirhisiwa xi nga si fihliwa hakunene (i.e. hidden.bs.tooltipxiendlakalo xi nga si humelela). Leswi swi tekiwa tanihi ku pfuxa “manual” ka xitsundzuxo xa xitirhisiwa.

tooltip.hide()

ku cinca-cinca

Ku cinca-cinca xitsundzuxo xa xitirhisiwa xa elemente. Ku tlhelela eka mufoyini xitsundzuxo xa xitirhisiwa xi nga si kombisiwa hakunene kumbe ku fihliwa (i.e. emahlweni ka ku humelela shown.bs.tooltipkumbe hidden.bs.tooltipxiendlakalo). Leswi swi tekiwa tanihi ku pfuxa “manual” ka xitsundzuxo xa xitirhisiwa.

tooltip.toggle()

lahla

Ku tumbeta no herisa xitirhisiwa xa elemente (Ku susa data leyi hlayisiweke eka elemente ya DOM). Switirhisiwa leswi tirhisaka ku rhumeriwa (leswi endliwaka hi ku tirhisa selectornhlawulo ) a swi nge herisiwi hi swoxe eka swiaki swa xihlohloteri swa vatukulu.

tooltip.dispose()

koteka

Yi nyika xitirhisiwa xa elemente vuswikoti byo kombisiwa. Switsundzuxo swa switirhisiwa swi tirhisiwa hi ku tiyimisela.

tooltip.enable()

vulamari

Ku susa vuswikoti bya xitirhisiwa xa elemente ku kombisiwa. Xitsundzuxo xa switirhisiwa xi ta kota ku kombisiwa ntsena loko xi pfuriwile nakambe.

tooltip.disable()

toggleYi pfuriwile

Ku cinca vuswikoti bya xitirhisiwa xa elemente ku kombisiwa kumbe ku fihliwa.

tooltip.toggleEnabled()

pfuxeta

Ku pfuxeta xiyimo xa xitsundzuxo xa xitirhisiwa xa elemente.

tooltip.update()

getXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa tooltip lexi fambelanaka na elemente ya DOM

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

kumaKumbeEndlaXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa tooltip lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga

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

Swiendlakalo

Muxaka wa xiendlakalo	Nhlamuselo
`show.bs.tooltip`	Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku `show`vitaniwa ndlela ya xikombiso.
`shown.bs.tooltip`	This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
`hide.bs.tooltip`	This event is fired immediately when the `hide` instance method has been called.
`hidden.bs.tooltip`	This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
`inserted.bs.tooltip`	This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM.

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

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

tooltip.hide()