Source

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.js kumwanya. Ugomba gushyiramo popper.min.js mbere ya bootstrap.js cyangwa gukoresha bootstrap.bundle.min.js/ bootstrap.bundle.jsirimo Popper.js 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.

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:

Ipantaro ifatanye urwego rukurikira keffiyeh birashoboka ko utigeze ubyumva. Ifoto icyumba cyogosha ubwanwa mbisi denim inyuguti ya vegan messenger umufuka stumptown. Umurima-kumeza seitan, mcsweeney's fixie irambye quinoa 8-biti byabanyamerika bafite terry richardson vinyl chambray. Ubwanwa bwatsitaye, abakarigani banh mi lomo inkuba. Tofu biodiesel williamsburg marfa, bane loko mcsweeney yoza vegan chambray. Umunyabukorikori rwose birasekeje icyaricyo cyose keytar , scenester umurima-kumeza banki bankin Austin twitter ikora freegan inguzanyo mbisi denim inkomoko yikawa ya virusi.

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 ibikoresho 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 HTML itabishaka (nka <span>s) irashobora gukorwa yibanze mugushyiramo tabindex="0"ikiranga, ibi bizongeramo ibishoboka birakaze kandi bitesha umutwe tab ihagarara kubintu bidakorana kubakoresha clavier. Mubyongeyeho, tekinoroji nyinshi zifasha kurubu ntabwo zitangaza 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="".

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 0 Offset ya tooltip ugereranije nintego yayo. Kubindi bisobanuro reba popper.js ya offset ya doc .
Gusubira inyuma umugozi | array 'flip' Emera kwerekana umwanya Popper azakoresha mugusubira inyuma. Kubindi bisobanuro reba imyitwarire ya Popper.js
imbibi umugozi | element 'umuzingoParent' Kurenga imipaka imipaka yibikoresho. Emera indangagaciro za ,,, 'viewport'cyangwa HTMLElement yerekana (JavaScript gusa). Kubindi bisobanuro reba Popper.js yo gukumiraOverflow docs .'window''scrollParent'

Ibiranga amakuru kubikoresho byihariye

Amahitamo kubikoresho bya buri muntu arashobora gutondekwa muburyo bwo gukoresha 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 ntigaragara.

$('#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…
})