in English

Ibikoresho

Inyandiko n'ingero zo kongeramo ibikoresho bya Bootstrap byabigenewe hamwe na CSS na JavaScript ukoresheje CSS3 kuri animasiyo na data-ibiranga kubika izina ryaho.

Incamake

Ibintu ugomba kumenya mugihe ukoresheje plugin ya tooltip:

  • Ibikoresho byifashisha isomero ryishyaka rya 3 Popper kugirango ihagarare. Ugomba gushyiramo popper.min.js mbere ya bootstrap.js cyangwa gukoresha bootstrap.bundle.min.js/ bootstrap.bundle.jsirimo Popper kugirango ibikoresho bikore!
  • Niba wubaka JavaScript yacu kuva isoko, birasabautil.js .
  • Ibikoresho ni opt-in kubwimpamvu zikorwa, ugomba rero kubitangiza wenyine .
  • Ibikoresho bifite imitwe ya zeru-ndende ntibigaragara.
  • Kugaragaza container: 'body'kugirango wirinde gutanga ibibazo mubice byinshi bigoye (nkitsinda ryacu ryinjiza, amatsinda ya buto, nibindi).
  • Gukurura ibikoresho byibikoresho byihishe ntabwo bizakora.
  • Ibikoresho .disabledcyangwa disabledibintu bigomba gukururwa kubintu bipfunyika.
  • Iyo iturutse kuri hyperlinks ikurikirana imirongo myinshi, ibikoresho bizaba hagati. Koresha white-space: nowrap;kuri <a>s kugirango wirinde iyi myitwarire.
  • Ibikoresho bigomba guhishwa mbere yuko ibintu bihuye bivanwa muri DOM.
  • Ibikoresho birashobora gukururwa dukesha ikintu kiri imbere mu gicucu DOM.
Mburabuzi, iki gice gikoresha ibikoresho byubatswe mu isuku, bikuraho ibintu byose bya HTML bitemewe. Reba igice cyisuku mubisobanuro byacu bya JavaScript kugirango ubone ibisobanuro birambuye.
Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Wabonye ibyo byose? Nibyiza, reka turebe uko bakorana ningero zimwe.

Urugero: Gushoboza ibikoresho ahantu hose

Uburyo bumwe bwo gutangiza ibikoresho byose kurupapuro byaba ari uguhitamo data-togglekubiranga:

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

Ingero

Hisha hejuru yibi bikurikira kugirango urebe ibikoresho:

Umwanya wanditse kugirango werekane umurongo uhuza hamwe nibikoresho. Ubu ni uwuzuza gusa, nta mwicanyi. Ibirimo byashyizwe hano gusa kugirango twigane ahari inyandiko nyayo . Kandi ibyo byose kugirango gusa nguhe igitekerezo cyukuntu ibikoresho byakoreshwa mugihe byakoreshejwe mubihe byukuri. Twizere rero ko ubu wabonye uburyo ibi bikoresho byihuza bishobora gukora mubikorwa, iyo ubikoresheje kurubuga rwawe cyangwa umushinga wawe.

Hisha hejuru ya buto hepfo kugirango urebe ibyerekezo bine byerekana: hejuru, iburyo, hepfo, n'ibumoso.

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

Hamwe na HTML yihariye yongeyeho:

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

Ikoreshwa

Ibikoresho bya plugin bitanga ibikubiyemo nibiranga kubisabwa, kandi kubisanzwe byerekana ibikoresho nyuma yibintu byabo.

Koresha igikoresho ukoresheje JavaScript:

$('#example').tooltip(options)
Kurenga autokandiscroll

Umwanya wibikoresho ugerageza guhita uhinduka mugihe kontineri yababyeyi ifite overflow: autocyangwa overflow: scrollnkiyacu .table-responsive, ariko iracyakomeza imyanya yumwimerere. Gukemura, shiraho boundaryamahitamo kubindi byose bitari agaciro gasanzwe, 'scrollParent'nka 'window':

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

Markup

Ikimenyetso gisabwa kubikoresho ni dataikiranga gusa no titlekuri element ya HTML wifuza kugira igikoresho. Ikimenyetso cyakozwe mubikoresho byoroshye biroroshye, nubwo bisaba umwanya (kubisanzwe, byashyizweho topna plugin).

Gukora ibikoresho bikora kuri clavier hamwe nabafasha gukoresha ikoranabuhanga

Ugomba kongeramo gusa ibikoresho byibikoresho bya HTML bisanzwe bisanzwe bya clavier-byibanda kandi bigakorana (nkumuhuza cyangwa kugenzura imiterere). Nubwo ibintu bya HTML uko bishakiye (nka <span>s) bishobora gukorwa byibandwaho mukongeramo tabindex="0"ikiranga, ibi bizongeramo ibishoboka birakaze kandi bitesha umutwe tab ihagarara kubintu bidakorana kubakoresha clavier, kandi tekinoroji ifasha muri iki gihe ntabwo itangaza ibikoresho muri ibi bihe. Ikigeretse kuri ibyo, ntukishingikirize gusa hovernkigitera ibikoresho byawe, kuko ibi bizatuma ibikoresho byawe bidashoboka gukurura abakoresha clavier.

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

Ibintu byahagaritswe

Ibintu bifite disabledikiranga ntabwo bikorana, bivuze ko abakoresha badashobora kwibanda, kugendagenda, cyangwa kubikanda kugirango batere igikoresho (cyangwa popover). Nkumurimo wakazi, uzakenera gukurura ibikoresho biva mubipfunyika <div>cyangwa <span>, nibyiza byakozwe na clavier-yibanze ukoresheje tabindex="0", hanyuma ukarenga pointer-eventskuri element yamugaye.

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-animation="".

Menya ko kubwimpamvu z'umutekano the sanitize, sanitizeFnn'amahitamo whiteListntashobora gutangwa ukoresheje ibiranga amakuru.
Izina Andika Mburabuzi Ibisobanuro
animasiyo boolean ni ukuri Koresha CSS igenda ihinduka kubikoresho
kontineri umugozi | ikintu | ibinyoma ibinyoma

Ongeraho ibikoresho byibikoresho runaka. Urugero : container: 'body'. Ihitamo ni ingirakamaro cyane cyane kuburyo rigufasha gushyira ibikoresho byifashishwa mugutembera kwinyandiko hafi yikintu gikurura - bizarinda igikoresho cyo kureremba kure yikintu gikurura mugihe idirishya rinini.
gutinda umubare | ikintu 0

Gutinda kwerekana no guhisha ibikoresho (ms) - ntibikoreshwa muburyo bwintoki

Niba umubare watanzwe, gutinda gukoreshwa byombi guhisha / kwerekana

Imiterere yibintu ni:delay: { "show": 500, "hide": 100 }
html boolean ibinyoma

Emerera HTML mubikoresho.

Niba ari ukuri, ibirango bya HTML mubikoresho byerekana titlebizerekanwa mubikoresho. Niba ari ibinyoma, uburyo bwa jQuery textbuzakoreshwa mugushyiramo ibintu muri DOM.

Koresha inyandiko niba uhangayikishijwe n'ibitero bya XSS.
gushyira umugozi | imikorere 'hejuru'

Nigute ushobora gushira ibikoresho - auto | hejuru | munsi | ibumoso | iburyo.
Iyo autobisobanuwe neza, bizahindura icyerekezo cyibikoresho.

Iyo imikorere ikoreshwa mukumenya aho ishyirwa, byitwa hamwe na tooltip DOM node nkibisobanuro byayo byambere hamwe na elementing DOM node nkibya kabiri. Imirongo thisyashizwe kumurongo wibikoresho.
uwatoranije umugozi | ibinyoma ibinyoma Niba uwatoranije atanzwe, ibikoresho byibikoresho bizahabwa intego zerekanwe. Mu myitozo, ibi bikoreshwa mugukoresha ibikoresho byongeweho imbaraga za DOM ( jQuery.oninkunga). Reba ibi nurugero rwamakuru .
Inyandikorugero umugozi '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Shingiro HTML yo gukoresha mugihe uremye ibikoresho.

Ibikoresho bya titlebikoresho bizaterwa muri .tooltip-inner.

.arrowByahindutse umwambi wibikoresho.

Ikintu cyo gupfunyika hanze kigomba kugira urwego .tooltipna role="tooltip".
Umutwe umugozi | ikintu | imikorere ''

Mburabuzi Umutwe Agaciro niba titleIkiranga kidahari.

Niba imikorere yatanzwe, izahamagarwa hamwe namakuru yayo thisyerekanwe kubintu ibikoresho bifatanye.
imbarutso umugozi 'hover yibanze'

Uburyo ibikoresho byifashishwa - kanda | hover | kwibanda | imfashanyigisho. Urashobora gutsinda imbarutso nyinshi; kubatandukanya n'umwanya.

'manual'yerekana ko igikoresho kizaterwa na porogaramu binyuze muri .tooltip('show'), .tooltip('hide')nuburyo .tooltip('toggle'); agaciro ntigashobora guhuzwa nizindi mbarutso.

'hover'ku giti cyayo bizavamo ibikoresho bidashobora gukururwa hifashishijwe clavier, kandi bigomba gukoreshwa gusa niba ubundi buryo bwo gutanga amakuru amwe kubakoresha clavier ahari.
offset umubare | umugozi | imikorere 0

Offset ya tooltip ugereranije nintego yayo.

Iyo imikorere ikoreshwa mukumenya offset, yitwa hamwe nikintu kirimo amakuru ya offset nkimpaka zayo za mbere. Igikorwa kigomba gusubiza ikintu gifite imiterere imwe. Ikintu gikurura DOM node yatambutse nkimpaka ya kabiri.

Kubindi bisobanuro reba kuri popper ya offset .
Gusubira inyuma umugozi | array 'flip' Emera kwerekana umwanya Popper azakoresha mugusubira inyuma. Kubindi bisobanuro reba imyitwarire ya Popper
Umukiriya umugozi | imikorere ''

Ongeraho amasomo kubikoresho iyo byerekanwe. Menya ko aya masomo azongerwaho hiyongereyeho ibyiciro byose byerekanwe mubishusho. Ongeraho ibyiciro byinshi, ubitandukanye numwanya : 'a b'.

Urashobora kandi gutambutsa imikorere igomba gusubiza umurongo umwe urimo amazina yinyongera.
imbibi umugozi | element 'umuzingoParent' Kurenga imipaka imipaka yibikoresho. Emera indangagaciro za ,,, 'viewport'cyangwa HTMLElement yerekana (JavaScript gusa). Kubindi bisobanuro reba Popper's gukumiraOverflow docs .'window''scrollParent'
kugira isuku boolean ni ukuri Gushoboza cyangwa guhagarika isuku. Niba ukora 'template'kandi 'title'amahitamo azagira isuku. Reba igice cyisuku mubyangombwa byacu bya JavaScript .
Urutonde ikintu Agaciro gasanzwe Ikintu kirimo ibiranga byemewe na tagi
sanitizeFn null | imikorere null Hano urashobora gutanga imikorere yawe yisuku. Ibi birashobora kuba ingirakamaro niba uhisemo gukoresha isomero ryabigenewe kugirango ukore isuku.
popperConfig null | ikintu null Guhindura Bootstrap isanzwe ya Popper config, reba iboneza rya Popper

Ibiranga amakuru kubikoresho byihariye

Amahitamo kubikoresho byihariye arashobora gutomorwa mugukoresha ibiranga amakuru, nkuko byasobanuwe haruguru.

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

$().tooltip(options)

Ongeraho ibikoresho byifashishwa mugukusanya ibintu.

.tooltip('show')

Yerekana igikoresho cyibikoresho. Garuka kumuhamagara mbere yuko ibikoresho byerekanwe (ni ukuvuga mbere yuko shown.bs.tooltipibyabaye biba). Ibi bifatwa nk "intoki" itera ibikoresho. Ibikoresho bifite imitwe ya zeru-ndende ntibigaragara.

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

.tooltip('hide')

Hisha igikoresho cyibikoresho. Garuka kumuhamagara mbere yigikoresho cyihishe mubyukuri (nukuvuga mbere yuko hidden.bs.tooltipibyabaye biba). Ibi bifatwa nk "intoki" itera ibikoresho.

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

.tooltip('toggle')

Kuzuza ibikoresho by'ibikoresho. Garuka kumuhamagara mbere yuko ibikoresho byerekanwe cyangwa byihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.tooltipcyangwa hidden.bs.tooltipibyabaye bibaho). Ibi bifatwa nk "intoki" itera ibikoresho.

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

.tooltip('dispose')

Hisha kandi usenye ibikoresho bya element. Ibikoresho bifashisha intumwa (zakozwe hakoreshejwe amahitamoselector ) ntibishobora gusenywa kugiti cyawe kubintu bikomokaho .

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

.tooltip('enable')

Itanga igikoresho cyibikoresho ubushobozi bwo kwerekanwa. Ibikoresho bifasha byanze bikunze.

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

.tooltip('disable')

Kuraho ubushobozi bwibikoresho byerekanwa. Igikoresho kizashobora gusa kwerekanwa niba cyongeye gukora.

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

.tooltip('toggleEnabled')

Kuzamura ubushobozi bwibikoresho byerekanwa cyangwa byihishe.

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

.tooltip('update')

Kuvugurura umwanya wibikoresho bya element.

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

Ibyabaye

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs.igikoresho Ibirori birasa ako kanya mugihe showurugero rwitwa.
yerekanwe.bs.igikoresho Ibi birori birukanwa mugihe ibikoresho byakorewe kugaragara kubakoresha (bizategereza ko CSS ihinduka).
guhisha.bs.igikoresho Ibi birori birahita bisohoka mugihe uburyo hidebwurugero bwahamagawe.
bihishe.bs.igikoresho Ibirori birukanwa mugihe ibikoresho byarangije guhishwa kubakoresha (bizategereza ko CSS ihinduka).
Byinjijwe.bs.ibikoresho Ibirori birukanwa nyuma show.bs.tooltipyibyabaye mugihe ibikoresho byifashishijwe byongewe kuri DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})