Source

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.js hirugarrenen liburutegian oinarritzen dira kokapenerako. Popper.min.js sartu behar duzu bootstrap.js baino lehen edo Popper.js 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.

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:

Praka estuak hurrengo mailan keffiyeh ziurrenik ez duzu horien berri. Photo booth beard raw denim letterpress vegan messenger poltsa stumptown. Baserritik mahairako seitan, mcsweeney's fixie sustainable quinoa 8 bit American Apparel- ek terry richardson binilozko chambray dute. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesela williamsburg marfa, lau loko mcsweeney's cleanse vegan chambray. Artisau benetan ironikoa edozein dela ere keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim jatorri bakarreko kafe birala.

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 gehiagorako, ikusi Popper.js-en offset docs .
erorketaKokapena katea | array 'irauli' Baimendu Popperrek atzerabidean zein posizio erabiliko duen zehaztea. Informazio gehiagorako, jo Popper.js-en portaera dokumentuetara
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 Popper.js-en preventOverflow docs .
saneatu boolearra egia Gaitu edo desgaitu desinfekzioa. Aktibatzen bada 'template'eta 'title'aukerak garbituko dira.
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.js konfigurazio lehenetsia aldatzeko, ikusi Popper.js-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...
})