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:

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 `auto`eta`scroll`

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- `title`informazioan errendatuko dira. Faltsua bada, jQuery-ren `text`metodoa 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 - `this`informazio instantzian ezartzen da.
hautatzailea	katea \| faltsua	faltsua	Hautatzailea ematen bada, tresna-informazioko objektuak zehaztutako helburuetara delegatuko dira. `jQuery.on`Praktikan, 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- `title`informazioa injektatuko da `.tooltip-inner`. `.arrow`tresna-informazioaren gezia bihurtuko da. Kanpoko bilgarri-elementuak `.tooltip`klasea eta `role="tooltip"`.
Izenburua	katea \| elementua \| funtzioa	''	Izenburuaren balio lehenetsia `title`atributua ez badago. `this`Funtzio 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 `show`instantzia-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 `hide`instantzia-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.tooltip`informazio txantiloia DOM-era gehitu denean.

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})