Source

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.js -kirjastoon. Sinun tulee lisätä popper.min.js ennen bootstrap.js:ää tai käyttää bootstrap.bundle.min.js/ bootstrap.bundle.jsjoka sisältää Popper.js:n, jotta työkaluvihjeet toimivat!
  • Jos rakennat JavaScript-koodiamme lähteestä, se vaatiiutil.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ä .disabledtai disabledelementtejä 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.

Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. 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-togglemääritteen perusteella:

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

Esimerkkejä

Vie hiiri alla olevien linkkien päälle nähdäksesi työkaluvinkit:

Tiukat housut seuraavan tason keffiyeh et luultavasti ole kuullut niistä. Photo Booth parta raaka denim kohopaino vegaaninen messenger bag stumptown. Maatilasta pöytään seitan, mcsweeneyn fixie kestävä quinoa 8-bittinen amerikkalainen vaatteet on Terry richardson vinyyli chambray. Beard stumptown, neuletakit banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, neljä loko mcsweeneyn puhdistavaa vegaani chambraya. Todella ironinen käsityöläinen , mitä tahansa keytar , scenester farm-to-table banksy Austin twitter kahva freegan cred raaka denim yksialkuperäinen kahvi virus.

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 autojascroll

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-responsiveboundary'scrollParent''window'

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

Merkintä

Työkaluvihjeen vaadittava merkintä on vain dataattribuutti ja titleHTML-elementissä, johon haluat työkaluvihjeen. Työkaluvihjeen luotu merkintä on melko yksinkertaista, vaikka se vaatii sijainnin (oletusarvoisesti toplaajennuksen 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 hovertyö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 disabledeivä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-eventskä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="".

Huomaa, että turvallisuussyistä sanitize, sanitizeFnja 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: container: 'body'. Tämä vaihtoehto on erityisen hyödyllinen, koska sen avulla voit sijoittaa työkaluvihjeen asiakirjan kulkuun lähelle liipaisuelementtiä – mikä estää työkaluvihjettä kellumasta pois liipaisuelementistä ikkunan koon muuttamisen aikana.
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:delay: { "show": 500, "hide": 100 }
html boolean väärä

Salli HTML työkaluvihjeessä.

Jos tosi, työkaluvihjeissä olevat HTML-tunnisteet titlehahmonnetaan työkaluvihjeessä. Jos epätosi, jQueryn textmenetelmää käytetään sisällön lisäämiseen DOM:iin.

Käytä tekstiä, jos olet huolissasi XSS-hyökkäyksistä.
sijoitus merkkijono | toiminto 'huippu'

Työkaluvihjeen sijoittaminen - auto | alkuun | pohja | vasemmalle | oikein.
Kun autoon määritetty, se suuntaa työkaluvihjeen dynaamisesti uudelleen.

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 thisasetetaan työkaluvihje-esiintymään.
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.ontuki). 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 titleruiskutetaan .tooltip-inner.

.arrowtulee työkaluvihjeen nuoleksi.

Uloimmassa kääreelementissä tulee olla .tooltipluokka ja role="tooltip".
otsikko merkkijono | elementti | toiminto ''

Otsikon oletusarvo, jos titleattribuuttia ei ole.

Jos funktio on annettu, sitä kutsutaan ja sen thisviite on asetettu elementille, johon työkaluvihje on liitetty.
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ä.

'manual'osoittaa, että työkaluvihje käynnistetään ohjelmallisesti .tooltip('show'), .tooltip('hide')ja .tooltip('toggle')-menetelmien avulla; tätä arvoa ei voi yhdistää minkään muun liipaisimen kanssa.

'hover'yksinään johtaa työkaluvihjeisiin, joita ei voida laukaista näppäimistön kautta, ja niitä tulisi käyttää vain, jos on olemassa vaihtoehtoisia tapoja välittää samat tiedot näppäimistön käyttäjille.
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 Popper.js:n offset-dokumenteissa .
varasijoitus merkkijono | joukko 'voltti' Salli määrittää, mitä asentoa Popper käyttää varautumisessa. Lisätietoja on Popper.js:n käyttäytymisdokumenteissa
rajaa merkkijono | elementti 'scrollParent' Työkaluvihjeen ylivuotorajoitusraja. Hyväksyy arvot 'viewport', 'window', 'scrollParent', tai HTMLElement-viittauksen (vain JavaScript). Lisätietoja on Popper.js:n preventOverflow-dokumenteissa .
puhdistaa boolean totta Ota desinfiointi käyttöön tai poista se käytöstä. Jos aktivoitu 'template', 'title'vaihtoehdot desinfioidaan.
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 Popper.js-oletusasetusta, katso Popper.js:n määritykset

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 .

Katso lisätietoja JavaScript - dokumentaatiostamme .

$().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.tooltiptapahtumaa). 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.tooltiptapahtumaa). 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.tooltiptai hidden.bs.tooltiptapahtumaa). 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 showinstanssimenetelmää 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 hideinstanssimenetelmää 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.tooltiptapahtuman jälkeen, kun työkaluvihjemalli on lisätty DOM:iin. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})