in English

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-attributes ya vuhlayiselo bya swihloko swa laha kaya.

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!
  • Loko u aka JavaScript ya hina ku suka eka xihlovo, swi lavautil.js .
  • 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-togglemfanelo ya swona:

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

Swikombiso

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

Tsalwa ra xikhomela-ndhawu ku kombisa swihlanganisi swin’wana swa le ndzeni ka layini hi switsundzuxo swa switirhisiwa. Leswi sweswi i filler ntsena, ku hava mudlayi. Vuxokoxoko byi vekiwile laha ntsena ku tekelela vukona bya tsalwa ra xiviri . Naswona hinkwaswo sweswo ntsena ku ku nyika mianakanyo ya ndlela leyi switsundzuxo swa switirhisiwa swi nga langutekaka ha yona loko swi tirhisiwa eka swiyimo swa xiviri. Kutani hi tshemba leswaku sweswi u vonile ndlela leyi switsundzuxo leswi eka swihlanganisi swi nga tirhaka ha yona hi ku tirhisa, loko se u swi tirhisa eka sayiti kumbe phurojeke ya wena .

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.

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

Naswona hi HTML ya ntolovelo leyi engeteriweke:

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

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:

$('#example').tooltip(options)
Ku tala ka mati autonascroll

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, veka boundarynhlawulo eka xin’wana na xin’wana handle ka ntikelo wa xiviri, 'scrollParent', ku fana na 'window':

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

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

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 leyi kongomisiweke eka khibhodi hi ku tirhisa tabindex="0", naswona u tlula pointer-eventseka elemente leyi nga tirhiki.

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-animation="".

Xiya leswaku hikwalaho ka swivangelo swa vuhlayiseki sanitize, sanitizeFnna whiteListswihlawulekisi a swi nge nyikiwi hi ku tirhisa swihlawulekisi swa data.
Vito Muxaka Ku tlula Nhlamuselo
ku endla swifaniso leswi hanyaka xitsonga xitsonga ntiyiso Tirhisa ku cinca ka ku fada ka CSS eka xitsundzuxo xa xitirhisiwa
xigwitsirisi ntambhu ya xirhendzevutani | xiaki xa | vunwa vunwa

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.
hlwela 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 vunwa

Pfumelela HTML eka xitsundzuxo xa switirhisiwa.

Loko ku ri ntiyiso, tithegi ta HTML eka tooltip's titleti ta kombisiwa eka tooltip. Loko ku ri mavunwa, ndlela ya jQuery textyi ta tirhisiwa ku nghenisa nhundzu eka DOM.

Tirhisa tsalwa loko u vilerisiwa hi nhlaselo wa XSS.
ku vekiwa ka swilo ntambhu ya xirhendzevutani | ntirho 'henhla'

Ndlela yo veka xitirhisiwa - auto | ehenhla | ehansi | ximatsi | mfanelo.
Loko autoswi 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 thiswu vekiwile eka xikombiso xa xitirhisiwa.
xihlawulekisi xa swilo ntambhu ya xirhendzevutani | vunwa vunwa 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.onnseketelo). Vona leswi ni xikombiso lexi dyondzisaka .
xifaniso xa xifaniso ntambu '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML ku tirhisa loko u endla xitirhisiwa.

Ti tooltip's titleti ta cheriwa eka .tooltip-inner.

.arrowyi ta va museve wa xitirhisiwa.

Xiphemu xa le handle xa xifunengeto xi fanele ku va na .tooltiptlilasi na role="tooltip".
xirhangi ntambhu ya xirhendzevutani | xiaki xa | ntirho '' .

Nhlayo ya xihloko xa xiviri loko titlexihlawulekisi xi nga ri kona.

Loko ntirho wu nyikiwile, wu ta vitaniwa hi thissete ya wona ya swikombo eka elemente leyi xitsundzuxo xa xitirhisiwa xi khomanisiweke na yona.
gwedla 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 .tooltip('show'), .tooltip('hide')na .tooltip('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.
offset nomboro | ntambhu ya xirhendzevutani | ntirho 0.

Ku hambanisiwa ka xitsundzuxo xa xitirhisiwa loko xi pimanisiwa na xikongomelo xa xona.

Loko ntirho wu tirhisiwa ku kumisisa offset, wu vitaniwa hi nchumu lowu nga na data ya offset tanihi argument ya wona yo sungula. Ntirho wu fanele ku vuyisa nchumu lowu nga na xivumbeko lexi fanaka. Node ya DOM ya elemente leyi hlohlotelaka yi hundziseriwa tanihi argument ya vumbirhi.

Ku kuma vuxokoxoko byo tala languta eka Popper's offset docs .
fallbackKu vekiwa ka swilo ntambhu ya xirhendzevutani | array ya xirhendzevutani 'hundzuluxa' Pfumelela ku boxa leswaku hi xihi xiyimo lexi Popper a nga ta xi tirhisa eka fallback. Ku kuma vuxokoxoko byo tala languta eka Popper's behavior docs
Tlilasi ya ntolovelo 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: 'a b'.

U nga ha tlhela u hundzisela ntirho lowu faneleke ku vuyisa ntambhu yin’we leyi nga na mavito ya titlilasi yo engetela.
ndzilakano ntambhu ya xirhendzevutani | nchumu 'ScrollMutswari'. Ndzilakano wa xipimelo xa ku tala ka xitirhisiwa. Ku amukela mimpimo ya 'viewport', 'window', 'scrollParent', kumbe xikombo xa HTMLElement (JavaScript ntsena). Ku kuma vuxokoxoko byo tala languta eka Popper's preventOverflow docs .
ku basisa xitsonga xitsonga ntiyiso 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 .
Nxaxamelo wo basa nchumu Nhlayo ya xiviri Nchumu lowu nga na swihlawulekisi leswi pfumeleriweke na tithegi
ku basisaFn null | ntirho hava Laha unga phakela ntirho wa wena wa sanitize. Leswi swinga pfuna loko u tsakela ku tirhisa layiburari leyi tinyiketeleke ku endla ku basisiwa.
xivumbeko xa popper null | nchumu hava Ku cinca xivumbeko xa Popper xa xiviri xa Bootstrap, vona xivumbeko xa 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.

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 .

$().tooltip(options)

Ku khomanisa xitirhisiwa xa xitirhisiwa eka nhlengeleto wa swiaki.

.tooltip('show')

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.

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

.tooltip('hide')

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.

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

.tooltip('toggle')

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.

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

.tooltip('dispose')

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

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

.tooltip('enable')

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

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

.tooltip('disable')

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

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

.tooltip('toggleEnabled')

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

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

.tooltip('update')

Ku pfuxeta xiyimo xa xitsundzuxo xa xitirhisiwa xa elemente.

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

Swiendlakalo

Muxaka wa Xiendlakalo Nhlamuselo
show.bs.xitsundzuxo xa switirhisiwa Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku showvitaniwa ndlela ya xikombiso.
shown.bs.xitsundzuxo xa switirhisiwa Xiendlakalo lexi xi duvuriwa loko xitsundzuxo xa xitirhisiwa xi endliwile xi vonaka eka mutirhisi (xi ta rindza ku cinca ka CSS ku hela).
hide.bs.xitsundzuxo xa switirhisiwa Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko ndlela ya hidexikombiso yi vitaniwile.
hidden.bs.xitsundzuxo xa switirhisiwa Xiendlakalo lexi xi duvuriwa loko xitsundzuxo xa xitirhisiwa xi hetile ku tumbetiwa eka mutirhisi (xi ta rindza ku cinca ka CSS ku hela).
inserted.bs.xitsundzuxo xa switirhisiwa Xiendlakalo lexi xi hlongoriwa endzhaku ka show.bs.tooltipxiendlakalo loko xifaniso xa xitirhisiwa xi engeteriwile eka DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})