in English

Erreminta-aholkuak

Bootstrap tresna-aholku pertsonalizatuak CSS eta JavaScript-ekin CSS3 erabiliz gehitzeko dokumentazioa eta adibideak, animazioak eta datu-atributuak tokiko tituluak gordetzeko.

Ikuspegi orokorra

Tooltip plugina erabiltzean jakin beharrekoak:

  • Tresna-informazioak Popper hirugarren liburutegian oinarritzen dira kokatzeko. Popper.min.js sartu behar duzu bootstrap.js baino lehen edo Popper duen bootstrap.bundle.min.js/ erabili bootstrap.bundle.jsbehar duzu tresna-aholkuak funtziona dezan!
  • Gure JavaScript iturburutik eraikitzen ari bazara, beharrezkoautil.js da .
  • Tresn-informazioak errendimendu arrazoiengatik aukeratzen dira, beraz, zuk zeuk hasieratu behar dituzu .
  • Luzera zeroko tituluak dituzten tresna-aholkuak ez dira inoiz bistaratzen.
  • Zehaztu container: 'body'osagai konplexuagoetan (adibidez, gure sarrera-taldeak, botoi-taldeak, etab.) arazoak errendatzea saihesteko.
  • Ezkutuko elementuei buruzko argibideak abiarazteak ez du funtzionatuko.
  • Elementuentzako tresna-informazioak bilgarri .disabled- disabledelementu batean abiarazi behar dira.
  • Lerro bat baino gehiago hartzen dituzten hiperesteketatik abiarazten denean, tresna-aholkuak zentratuta egongo dira. Erabili white-space: nowrap;zure aldean <a>portaera hori saihesteko.
  • Tresn-informazioak ezkutatu egin behar dira dagozkien elementuak DOMetik kendu aurretik.
  • Tresn-informazioak itzaleko DOM baten barruan dagoen elementu bati esker abiarazi daitezke.
Lehenespenez, osagai honek barneko edukien desinfektatzailea erabiltzen du, berariaz onartzen ez diren HTML elementuak kentzen dituena. Ikusi desinfektatzaileen atala gure JavaScript dokumentazioan xehetasun gehiago lortzeko.
Osagai honen animazio-efektua prefers-reduced-motionmultimedia kontsultaren menpe dago. Ikusi gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .

Hori guztia lortu duzu? Bikaina, ikus dezagun nola funtzionatzen duten adibide batzuekin.

Adibidea: gaitu tresna-informazioak nonahi

Orrialde bateko tresna-aholku guztiak hasieratzeko modu bat haien data-toggleatributuaren arabera hautatzea izango litzateke:

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

Adibideak

Pasatu pasa ezazu beheko esteken gainean tresna-aholkuak ikusteko:

Leku-markaren testua lerroko esteka batzuk argibideekin erakusteko. Hau orain betegarria besterik ez da, hiltzailerik ez. Hemen jarritako edukia benetako testuaren presentzia imitatzeko . Eta hori guztia mundu errealeko egoeretan erabilita tresna-aholkuak nola ikusiko liratekeen ideia bat emateko. Beraz, zorionez, orain ikusi duzula esteketako aholku hauek praktikan nola funtziona dezaketen, behin zure webgunean edo proiektuan erabiltzen dituzunean .

Pasatu sakatu beheko botoien gainean lau tresna-aholkuak ikusteko: goiko, eskuineko, beheko eta ezkerreko.

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

Eta HTML pertsonalizatua gehituta:

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

Erabilera

Tooltip pluginak edukia eta markak sortzen ditu eskaeraren arabera, eta, modu lehenetsian, tresna-aholkuak jartzen ditu abiarazte-elementuaren ondoren.

Aktibatu tresna-informazioa JavaScript bidez:

$('#example').tooltip(options)
Gainezka autoetascroll

Tresn-informazioaren posizioa automatikoki aldatzen saiatzen da edukiontzi nagusi batek gure gunea duen overflow: autoedo overflow: scrollatsegin duenean .table-responsive, baina hala ere jatorrizko kokapenari eusten dio. Ebazteko, ezarri boundaryaukera balio lehenetsia ez den beste ezer 'scrollParent', adibidez 'window':

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

Markatzea

Tresna-informazio baterako beharrezkoa den marka dataatributu bat baino ez da eta titletresna-aholkua izan nahi duzun HTML elementuan. Tresna-informazio baten markaketa sinple samarra da, nahiz eta posizio bat behar duen (lehenespenez, toppluginak ezarrita).

Teklatuaren eta laguntza-teknologien erabiltzaileentzat tresna-informazioak funtzionatzea

Tradizionalki teklatuan fokua eta elkarreragilea diren HTML elementuei (adibidez, estekak edo inprimaki-kontrolak, adibidez) tresna-aholkuak gehitu behar dizkiezu. HTML elementu arbitrarioak (adibidez, <span>s) atributua gehituta foka daitezkeen arren tabindex="0", honek teklatu erabiltzaileentzako elementu ez-interaktiboetan tabulazio gogaikarri eta nahasgarriak gehituko ditu eta gaur egun laguntza-teknologia gehienek ez dute tresna-informazioa iragartzen egoera honetan. hoverGainera, ez izan zure tresna-informazioaren abiarazle gisa soilik fidatu , horrek zure tresna-aholkuak ezinezko bihurtuko baititu teklatuaren erabiltzaileentzat.

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

Desgaitutako elementuak

Atributua duten elementuak disabledez dira elkarreragileak, hau da, erabiltzaileek ezin dituzte bideratu, pasa edo klik egin tresna-informazio bat (edo popover) abiarazteko. Konponbide gisa, tresna-informazioa abiarazi nahi duzu bilgarri batetik <div>edo <span>, hobeki teklatua bideratzeko modukoa erabiliz , eta desgaitutako elementua tabindex="0"gainidatzi nahi duzu.pointer-events

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-animation="".

Kontuan izan segurtasun arrazoiengatik sanitize, sanitizeFneta whiteListaukerak ezin direla eman datu-atributuak erabiliz.
Izena Mota Lehenetsia Deskribapena
animazioa boolearra egia Aplikatu CSS desagertze-trantsizioa tresna-informazioari
edukiontzi katea | elementua | faltsua faltsua

Elementu zehatz bati eransten dio tresna-informazioa. Adibidea container: 'body':. Aukera hau bereziki erabilgarria da, tresna-abiarazlea dokumentuaren fluxuan abiarazte-elementutik gertu kokatzeko aukera ematen baitu, eta horrek tresna-abiarazlea elementu abiarazletik mugitzea eragotziko du leihoaren tamaina aldatzean.
atzerapena zenbakia | objektua 0

Atzeratu tresna-informazioa erakusteko eta ezkutatzeko (ms) - ez dagokio eskuzko abiarazle motari

Zenbaki bat ematen bada, atzerapena aplikatuko da ezkutatzeko/erakusteko

Objektuaren egitura hau da:delay: { "show": 500, "hide": 100 }
html boolearra faltsua

Baimendu HTML tresna-informazioan.

Egia bada, tresna-informazioko HTML etiketak tresna- titleinformazioan errendatuko dira. Faltsua bada, jQuery-ren textmetodoa erabiliko da edukia DOMean txertatzeko.

Erabili testua XSS erasoekin kezkatuta bazaude.
Kokapen katea | funtzioa 'goian'

Nola kokatu tresna-informazioa - auto | goian | behea | ezkerra | eskubidea.
Zehazten denean auto, tresna-informazioa dinamikoki berbideratuko du.

Funtzio bat kokapena zehazteko erabiltzen denean, tresna-informazioa DOM nodoa deitzen da lehen argumentua eta abiarazte elementua DOM nodoa bigarren gisa. Testuingurua tresna - thisinformazio instantzian ezartzen da.
hautatzailea katea | faltsua faltsua Hautatzailea ematen bada, tresna-informazioko objektuak zehaztutako helburuetara delegatuko dira. jQuery.onPraktikan, hau dinamikoki gehitutako DOM elementuei ( euskarria) tresna-aholkuak aplikatzeko erabiltzen da . Ikusi hau eta adibide informatzaile bat .
txantiloia katea '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Oinarrizko HTML tresna-informazioa sortzean erabiltzeko.

Tresna- titleinformazioa injektatuko da .tooltip-inner.

.arrowtresna-informazioaren gezia bihurtuko da.

Kanpoko bilgarri-elementuak .tooltipklasea eta role="tooltip".
Izenburua katea | elementua | funtzioa ''

Izenburuaren balio lehenetsia titleatributua ez badago.

thisFuntzio bat ematen bada, tresna -informazioa erantsita dagoen elementuari erreferentzia ezarrita deituko zaio .
trigger katea 'pasatzean fokua'

Nola abiarazten den tresna-informazioa - egin klik | pasatzea | fokua | eskuliburua. Hainbat abiarazle pasa ditzakezu; bereiz itzazu tarte batekin.

'manual'.tooltip('show')tresna-informazioa , .tooltip('hide')eta .tooltip('toggle')metodoen bidez programatikoki abiaraziko dela adierazten du ; balio hori ezin da beste edozein abiarazlerekin konbinatu.

'hover'bere kabuz teklatuaren bidez abiarazi ezin diren tresna-aholkuak sortuko dira, eta teklatuaren erabiltzaileei informazio bera helarazteko metodo alternatiboak badaude soilik erabili behar dira.
desplazamendu zenbakia | katea | funtzioa 0

Aholkuaren desplazamendua bere xedearekiko.

Desplazamendua zehazteko funtzio bat erabiltzen denean, lehen argumentu gisa desplazamendu-datuak dituen objektu batekin deitzen da. Funtzioak egitura bereko objektu bat itzuli behar du. DOM nodo abiarazteko elementua bigarren argumentu gisa pasatzen da.

Informazio gehiago lortzeko, ikusi Popper-en offset docs .
erorketaKokapena katea | array 'irauli' Baimendu Popperrek atzerabidean zein posizio erabiliko duen zehaztea. Informazio gehiagorako, jo Popperren portaera dokumentuetara
CustomClass katea | funtzioa ''

Gehitu klaseak tresna-informazioan erakusten denean. Kontuan izan klase hauek txantiloian zehaztutako klaseez gain gehituko direla. Hainbat klase gehitzeko, bereiz itzazu zuriuneekin: 'a b'.

Klase-izen gehigarriak dituen kate bakarra itzuli beharko lukeen funtzio bat ere pasa dezakezu.
muga katea | elementua 'ScrollParent' Tresnaren argibidearen gainezka-murriztapenaren muga. 'viewport', 'window', 'scrollParent', edo HTMLElement erreferentzia baten balioak onartzen ditu (JavaScript soilik). Informazio gehiago lortzeko, ikusi Popperren preventOverflow docs .
saneatu boolearra egia Gaitu edo desgaitu desinfekzioa. Aktibatzen bada 'template'eta 'title'aukerak garbituko dira. Ikusi desinfektatzaileen atala gure JavaScript dokumentazioan .
Zerrenda zuria objektua Balio lehenetsia Baimendutako atributuak eta etiketak dituen objektua
sanitizeFn nulua | funtzioa nulua Hemen zure higienizazio funtzioa horni dezakezu. Hau erabilgarria izan daiteke garbiketa egiteko liburutegi dedikatu bat erabili nahi baduzu.
popperConfig nulua | objektua nulua Bootstrap-en Popper konfigurazio lehenetsia aldatzeko, ikusi Popper-en konfigurazioa

Banakako argibideetarako datu-atributuak

Banakako argibideetarako aukerak bestela datu-atributuak erabiliz zehaztu daitezke, goian azaldu bezala.

Metodoak

Metodo asinkronoak eta trantsizioak

API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .

Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .

$().tooltip(options)

Elementu bilduma bati tresna-informazio-kudeatzailea eransten dio.

.tooltip('show')

Elementu baten argibidea erakusten du. Deitzaileari itzultzen zaio tresna-informazioa benetan erakutsi aurretik (hau da, shown.bs.tooltipgertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da. Luzera zeroko tituluak dituzten tresna-aholkuak ez dira inoiz bistaratzen.

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

.tooltip('hide')

Elementu baten argibidea ezkutatzen du. Deitzen duenari itzultzen zaio tresna-informazioa benetan ezkutatu baino lehen (hau da, hidden.bs.tooltipgertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da.

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

.tooltip('toggle')

Elementu baten tresna-informazioa aktibatzen du. Deitzaileari itzultzen zaio tresna-informazioa benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.tooltipedo hidden.bs.tooltipgertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da.

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

.tooltip('dispose')

Elementu baten informazioa ezkutatu eta suntsitzen du. Ordezkapena erabiltzen duten tresna- informazioak ( selectoraukera erabiliz sortzen direnak ) ezin dira banan-banan suntsitu ondorengo abiarazle-elementuetan.

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

.tooltip('enable')

Elementu baten argibideari erakusteko gaitasuna ematen dio. Tresn-informazioak lehenespenez gaituta daude.

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

.tooltip('disable')

Elementu baten tresna-informazioa erakusteko gaitasuna kentzen du. Tresna-informazioa berriro gaituta badago soilik erakutsi ahal izango da.

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

.tooltip('toggleEnabled')

Elementu baten tresna-informazioa erakusteko edo ezkutatzeko gaitasuna aldatzen du.

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

.tooltip('update')

Elementu baten argibidearen posizioa eguneratzen du.

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

Gertaerak

Gertaera mota Deskribapena
erakutsi.bs.tooltip Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean.
erakusten.bs.aholkua Gertaera hau tresna-informazioa erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
ezkutatu.bs.tooltip Gertaera hau berehala abiarazten da hideinstantzia-metodoa deitzen denean.
ezkutuko.bs.tooltip Gertaera hau tresna-informazioa erabiltzaileari ezkutatzen amaitzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
txertatua.bs.tresna-informazioa Gertaera hau gertaeraren ondoren abiarazten da tresna- show.bs.tooltipinformazio txantiloia DOM-era gehitu denean. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})