Työkaluvinkit
Dokumentaatio ja esimerkkejä mukautettujen Bootstrap-työkaluvihjeiden lisäämisestä CSS:n ja JavaScriptin kanssa käyttämällä CSS3:a animaatioita ja dataattribuutteja varten paikallista otsikon tallennusta varten.
Yleiskatsaus
Asiat, jotka on hyvä tietää käytettäessä työkaluvihje-laajennusta:
- Työkaluvihjeiden paikannus perustuu kolmannen osapuolen Popper -kirjastoon. Sinun tulee lisätä popper.min.js ennen bootstrap.js:ää tai käyttää
bootstrap.bundle.min.js
/bootstrap.bundle.js
joka sisältää Popperin, jotta työkaluvihjeet toimivat! - Jos rakennat JavaScript-koodiamme lähteestä, se vaatii
util.js
. - Työkaluvihjeet ovat käytettävissä suorituskykysyistä, joten sinun on alustettava ne itse .
- Työkaluvihjeitä, joiden otsikot ovat nollapituisia, ei koskaan näytetä.
- Määritä
container: 'body'
, jotta vältät hahmonnusongelmia monimutkaisemmissa osissa (kuten syöttöryhmämme, painikeryhmämme jne.). - Työkaluvihjeiden käynnistäminen piilotetuista elementeistä ei toimi.
- Työkaluvihjeitä
.disabled
taidisabled
elementtejä on käynnistettävä kääreelementissä. - Kun työkaluvihjeet käynnistetään hyperlinkeistä, jotka kattavat useita rivejä, työkaluvihjeet keskitetään. Vältä tämä käyttäytyminen käyttämällä sitä
white-space: nowrap;
.<a>
- Työkaluvihjeet on piilotettava ennen kuin niitä vastaavat elementit on poistettu DOM:sta.
- Työkaluvihjeitä voidaan laukaista varjo-DOM:n sisällä olevan elementin ansiosta.
prefers-reduced-motion
mediakyselystä. Katso
esteettömyysdokumentaation osio liikkeen vähentämisestä .
Onko sinulla kaikki tämä? Hienoa, katsotaan kuinka ne toimivat joidenkin esimerkkien avulla.
Esimerkki: Ota työkaluvihjeet käyttöön kaikkialla
Yksi tapa alustaa kaikki sivulla olevat työkaluvihjeet on valita ne niiden data-toggle
määritteen perusteella:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Esimerkkejä
Vie hiiri alla olevien linkkien päälle nähdäksesi työkaluvinkit:
Paikkamerkkiteksti, joka esittelee joitain upotettuja linkkejä työkaluvihjeillä. Tämä on nyt vain täyte, ei tappaja. Sisältö on sijoitettu tähän vain matkimaan oikean tekstin läsnäoloa . Ja kaikki tämä vain antaaksemme sinulle käsityksen siitä, miltä työkaluvihjeet näyttäisivät todellisissa tilanteissa. Joten toivottavasti olet nyt nähnyt, kuinka nämä linkkien työkaluvinkit voivat toimia käytännössä, kun käytät niitä omalla sivustollasi tai projektissasi.
Vie hiiri alla olevien painikkeiden päälle nähdäksesi neljä työkaluvihjeen suuntaa: ylhäältä, oikealta, alhaalta ja vasemmalta.
<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>
Ja mukautettu HTML lisätty:
<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>
Käyttö
Työkaluvihje-laajennus luo sisältöä ja merkintöjä pyynnöstä ja sijoittaa työkaluvihjeet oletuksena niiden triggerelementin perään.
Käynnistä työkaluvihje JavaScriptin kautta:
$('#example').tooltip(options)
Ylivuoto auto
jascroll
Työkaluvihjeen sijainti yrittää muuttua automaattisesti, kun ylätason säilössä on meidän overflow: auto
, mutta se säilyttää alkuperäisen sijoittelun sijainnin. Ratkaisemiseksi aseta asetukseksi jokin muu kuin oletusarvo , kuten :overflow: scroll
.table-responsive
boundary
'scrollParent'
'window'
$('#example').tooltip({ boundary: 'window' })
Merkintä
Työkaluvihjeen vaadittava merkintä on vain data
attribuutti ja title
HTML-elementissä, johon haluat työkaluvihjeen. Työkaluvihjeen luotu merkintä on melko yksinkertaista, vaikka se vaatii sijainnin (oletusarvoisesti top
laajennuksen asettama).
Työkaluvihjeiden saaminen toimimaan näppäimistön ja aputekniikan käyttäjille
Lisää työkaluvihjeitä vain sellaisiin HTML-elementteihin, jotka ovat perinteisesti kohdistettavissa näppäimistöön ja ovat vuorovaikutteisia (kuten linkit tai lomakeohjaimet). Vaikka mielivaltaiset HTML-elementit (kuten <span>
s) voidaan tehdä tarkennettavissa lisäämällä tabindex="0"
attribuutti, tämä lisää mahdollisesti ärsyttäviä ja hämmentäviä sarkaimia ei-interaktiivisiin elementteihin näppäimistön käyttäjille, ja useimmat avustavat tekniikat eivät tällä hetkellä ilmoita työkaluvihjettä tässä tilanteessa. Älä myöskään luota pelkästään hover
työkaluvihjeesi laukaisuun, koska tämä tekee työkaluvihjeistäsi mahdotonta käynnistää näppäimistön käyttäjille.
<!-- 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>
Poistetut elementit
Attribuutilla varustetut elementit disabled
eivät ole vuorovaikutteisia, mikä tarkoittaa, että käyttäjät eivät voi tarkentaa, viedä hiiren osoitinta tai napsauttaa niitä käynnistääkseen työkaluvihjeen (tai ponnahdusikkunan). Kiertokeinona sinun kannattaa käynnistää työkaluvihje kääreestä <div>
tai <span>
, ihanteellisesti näppäimistöllä tarkennettavaksi tehtynä käyttämällä tabindex="0"
, ja ohittaa pointer-events
käytöstä poistetun elementin.
<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>
Vaihtoehdot
Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-
, kuten kohdassa data-animation=""
.
sanitize
,
sanitizeFn
ja
whiteList
-asetuksia ei voida toimittaa dataattribuuttien avulla.
Nimi | Tyyppi | Oletus | Kuvaus |
---|---|---|---|
animaatio | boolean | totta | Käytä työkaluvihjeeseen CSS-häivytystä |
kontti | merkkijono | elementti | väärä | väärä | Liittää työkaluvihjeen tiettyyn elementtiin. Esimerkki: |
viive | numero | esine | 0 | Työkaluvihjeen näyttämisen ja piilottamisen viive (ms) - ei koske manuaalista liipaisintyyppiä Jos numero annetaan, viivettä käytetään molempiin piilottamiseen/näyttöön Objektin rakenne on: |
html | boolean | väärä | Salli HTML työkaluvihjeessä. Jos tosi, työkaluvihjeissä olevat HTML-tunnisteet Käytä tekstiä, jos olet huolissasi XSS-hyökkäyksistä. |
sijoitus | merkkijono | toiminto | 'huippu' | Työkaluvihjeen sijoittaminen - auto | alkuun | pohja | vasemmalle | oikein. Kun funktiota käytetään sijoittelun määrittämiseen, sitä kutsutaan työkaluvihjeen DOM-solmu ensimmäisenä argumenttina ja liipaisuelementin DOM-solmu toisena argumenttina. Konteksti |
valitsin | merkkijono | väärä | väärä | Jos valitsin on käytössä, työkaluvihjeobjektit delegoidaan määritetyille kohteille. Käytännössä tätä käytetään myös työkaluvihjeiden soveltamiseen dynaamisesti lisättyihin DOM-elementteihin ( jQuery.on tuki). Katso tämä ja informatiivinen esimerkki . |
sapluuna | merkkijono | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Perus-HTML, jota käytetään työkaluvihjeen luomisessa. Työkalukärjet
Uloimmassa kääreelementissä tulee olla |
otsikko | merkkijono | elementti | toiminto | '' | Otsikon oletusarvo, jos Jos funktio on annettu, sitä kutsutaan ja sen |
laukaista | merkkijono | 'hover focus' | Kuinka työkaluvihje käynnistetään - napsauta | leijua | keskittyä | manuaalinen. Voit läpäistä useita laukaisimia; erota ne välilyönnillä.
|
offset | numero | merkkijono | toiminto | 0 | Työkaluvihjeen siirtymä suhteessa sen kohteeseen. Kun funktiota käytetään määrittämään siirtymä, sitä kutsutaan objektilla, joka sisältää offset-tiedot ensimmäisenä argumenttina. Funktion on palautettava objekti, jolla on sama rakenne. Liipaisuelementin DOM-solmu välitetään toisena argumenttina. Lisätietoja on Popperin offset-dokumenteissa . |
varasijoitus | merkkijono | joukko | 'voltti' | Salli määrittää, mitä asentoa Popper käyttää varautumisessa. Lisätietoja on Popperin käyttäytymisdokumenteissa |
custom Class | merkkijono | toiminto | '' | Lisää luokat työkaluvihjeeseen, kun se näytetään. Huomaa, että nämä luokat lisätään mallissa määritettyjen luokkien lisäksi. Voit lisätä useita luokkia erottamalla ne välilyönneillä: Voit myös välittää funktion, jonka pitäisi palauttaa yksi merkkijono, joka sisältää muita luokkien nimiä. |
rajaa | merkkijono | elementti | 'scrollParent' | Työkaluvihjeen ylivuotorajoitusraja. Hyväksyy arvot 'viewport' , 'window' , 'scrollParent' , tai HTMLElement-viittauksen (vain JavaScript). Lisätietoja on Popperin preventOverflow -dokumenteissa . |
puhdistaa | boolean | totta | Ota desinfiointi käyttöön tai poista se käytöstä. Jos aktivoitu 'template' , 'title' vaihtoehdot desinfioidaan. Katso desinfiointiosio JavaScript-dokumentaatiossamme . |
valkoinen lista | esine | Oletusarvo | Objekti, joka sisältää sallitut attribuutit ja tunnisteet |
desinfioiFn | nolla | toiminto | tyhjä | Täällä voit toimittaa oman desinfiointitoiminnon. Tästä voi olla hyötyä, jos haluat käyttää desinfiointiin erityistä kirjastoa. |
popperConfig | nolla | esine | tyhjä | Jos haluat muuttaa Bootstrapin Popperin oletusasetuksia, katso Popperin asetukset |
Tietoattribuutit yksittäisille työkaluvihjeille
Vaihtoehtoisesti yksittäisten työkaluvihjeiden asetukset voidaan määrittää käyttämällä dataattribuutteja, kuten edellä on selitetty.
menetelmät
Asynkroniset menetelmät ja siirtymät
Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .
$().tooltip(options)
Kiinnittää työkaluvihjeiden käsittelijän elementtikokoelmaan.
.tooltip('show')
Näyttää elementin työkaluvihjeen. Palaa soittajalle ennen kuin työkaluvihje on todellisuudessa näytetty (eli ennen shown.bs.tooltip
tapahtumaa). Tätä pidetään työkaluvihjeen "manuaalisena" käynnistämisenä. Työkaluvihjeitä, joiden otsikot ovat nollapituisia, ei koskaan näytetä.
$('#element').tooltip('show')
.tooltip('hide')
Piilottaa elementin työkaluvihjeen. Palaa soittajalle ennen kuin työkaluvihje on todella piilotettu (eli ennen hidden.bs.tooltip
tapahtumaa). Tätä pidetään työkaluvihjeen "manuaalisena" käynnistämisenä.
$('#element').tooltip('hide')
.tooltip('toggle')
Vaihtaa elementin työkaluvihjeen päälle/pois. Palaa soittajalle ennen kuin työkaluvihje on todellisuudessa näytetty tai piilotettu (eli ennen shown.bs.tooltip
tai hidden.bs.tooltip
tapahtumaa). Tätä pidetään työkaluvihjeen "manuaalisena" käynnistämisenä.
$('#element').tooltip('toggle')
.tooltip('dispose')
Piilottaa ja tuhoaa elementin työkaluvihjeen. Delegointia käyttäviä työkaluvihjeitä (jotka luodaan vaihtoehdolla selector
) ei voida tuhota yksitellen jälkeläisissä triggerelementeissä.
$('#element').tooltip('dispose')
.tooltip('enable')
Antaa elementin työkaluvihjeelle mahdollisuuden näkyä. Työkaluvihjeet ovat oletuksena käytössä.
$('#element').tooltip('enable')
.tooltip('disable')
Poistaa mahdollisuuden näyttää elementin työkaluvihjettä. Työkaluvinkki voidaan näyttää vain, jos se otetaan uudelleen käyttöön.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Vaihtaa elementin työkaluvihjeen näyttämisen tai piilotuksen.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Päivittää elementin työkaluvihjeen sijainnin.
$('#element').tooltip('update')
Tapahtumat
Tapahtumatyyppi | Kuvaus |
---|---|
show.bs.työkaluvinkki | Tämä tapahtuma käynnistyy välittömästi, kun show instanssimenetelmää kutsutaan. |
näytetään.bs.työkaluvinkki | Tämä tapahtuma käynnistyy, kun työkaluvihje on tehty näkyväksi käyttäjälle (odottaa CSS-siirtymien valmistumista). |
hide.bs.tooltip | Tämä tapahtuma käynnistyy välittömästi, kun hide instanssimenetelmää on kutsuttu. |
piilotettu.bs.työkaluvinkki | Tämä tapahtuma käynnistyy, kun työkaluvihje on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista). |
lisätty.bs.työkaluvinkki | Tämä tapahtuma käynnistyy show.bs.tooltip tapahtuman jälkeen, kun työkaluvihjemalli on lisätty DOM:iin. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})