Source

Tööriistanõuanded

Dokumentatsioon ja näited kohandatud Bootstrapi tööriistavihjete lisamiseks CSS-i ja JavaScriptiga, kasutades CSS3 animatsioonide ja andmeatribuutide jaoks kohaliku pealkirjade salvestamiseks.

Ülevaade

Mida peaksite tööriistavihje pistikprogrammi kasutamisel teadma:

  • Tööriistanäpunäited toetuvad positsioneerimiseks kolmanda osapoole teegile Popper.js . Tööriistanäpunäidete toimimiseks peate lisama popper.min.js-i enne bootstrap.js-i või kasutama funktsiooni bootstrap.bundle.min.js/ bootstrap.bundle.js, mis sisaldab Popper.js-i!
  • Kui loote meie JavaScripti allikast, nõuabutil.js see .
  • Tööriistanäpunäited on toimivuse huvides lubatud, seega peate need ise lähtestama .
  • Nullpikkusega pealkirjadega vihjeid ei kuvata kunagi.
  • Määrake container: 'body', et vältida renderdamisprobleeme keerukamates komponentides (nt meie sisendrühmad, nupurühmad jne).
  • Peidetud elementide tööriistavihjete käivitamine ei tööta.
  • Ümbriselemendil tuleb käivitada tööriistaspikrid .disabledvõi disabledelementide jaoks.
  • Kui käivitatakse mitut rida hõlmavate hüperlinkide kaudu, tsentreeritakse kohtspikrid. Sellise käitumise vältimiseks kasutage white-space: nowrap;seda oma peal .<a>
  • Tööriistavihjed peavad olema peidetud enne, kui nende vastavad elemendid on DOM-ist eemaldatud.
  • Tööriistanäpunäiteid saab käivitada tänu vari-DOM-i sees olevale elemendile.

Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Kas teil on see kõik? Suurepärane, vaatame mõne näitega, kuidas need töötavad.

Näide: lubage tööriistaspikrid kõikjal

Üks viis lehe kõigi tööriistavihjete lähtestamiseks on valida need nende data-toggleatribuudi järgi:

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

Näited

Tööriistanäpunäidete nägemiseks hõljutage kursorit allolevate linkide kohal.

Kitsad püksid järgmise taseme keffiyeh , te pole neist ilmselt kuulnud. Fotokabiini habe toores teksast kõrgtrüki vegan messenger bag stumptown. Farmist lauale seitan, Mcsweeney fixie säästva kinoa 8-bitine Ameerika rõivas on frotee richardsoni vinüül chambray. Beard stumptown, kardiganid banh mi lomo thundercats. Tofu biodiisel williamsburg marfa, neli loko mcsweeney puhast vegan chambray. Tõeliselt irooniline käsitööline , olenemata klaviatuurist , farmist lauale mõeldud Austini Twitteri käepide freegan cred toores teksariidest ühe päritoluga kohviviirus.

Hõljutage kursorit allolevate nuppude kohal, et näha nelja tööriistaspikri suunda: ülemine, parem, alumine ja vasak.

<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 kohandatud HTML-iga lisatud:

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

Kasutamine

Tööriistavihje pistikprogramm loob nõudmisel sisu ja märgistuse ning asetab vaikimisi vihjed nende päästikuelemendi järele.

Käivitage kohtspikker JavaScripti kaudu:

$('#example').tooltip(options)
Ülevool autojascroll

Tööriistavihje positsiooni üritatakse automaatselt muuta, kui ülemkonteineris on meie ümbris overflow: autovõi overflow: scrollmeeldib .table-responsivesellele, kuid säilitab siiski algse paigutuse asukoha. Lahendamiseks määrake boundarysuvandiks midagi muud peale vaikeväärtuse 'scrollParent', näiteks 'window':

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

Märgistus

Tööriistaspikri nõutav märgistus on ainult dataatribuut ja titleHTML-elemendil, mille kohta soovite vihjet, on. Tööriistaspikri loodud märgistus on üsna lihtne, kuigi see nõuab positsiooni (vaikimisi topon pistikprogrammi poolt määratud).

Tööriistanäpunäidete kasutamine klaviatuuri ja abitehnoloogia kasutajatele

Peaksite lisama ainult HTML-i elementidele vihjeid, mis on traditsiooniliselt klaviatuurile keskenduvad ja interaktiivsed (nt lingid või vormi juhtelemendid). Kuigi suvalisi HTML-i elemente (nt <span>s) saab tabindex="0"atribuudi lisamisega fokusseeritavaks muuta, lisab see klaviatuurikasutajatele potentsiaalselt tüütuid ja segadusse ajavaid tabelduspunkte mitteinteraktiivsetele elementidele. Lisaks ei anna enamik abitehnoloogiaid praegu selles olukorras tööriistavihjet.

Lisaks ärge toetuge ainult hovertööriistaspikri käivitajale, kuna see muudab teie vihjete käivitamise klaviatuuri kasutajatel võimatuks.

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

Keelatud elemendid

Atribuudiga elemendid disabledei ole interaktiivsed, mis tähendab, et kasutajad ei saa kohtspikri (või hüpikakna) käivitamiseks teravustada, hõljutada või klõpsata. Lahendusena võiksite käivitada tööriistaspikri ümbrisest <div>või <span>, ideaaljuhul kasutades klaviatuurile fokusseeritavaks tabindex="0", ja alistada pointer-eventskeelatud elemendi.

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-animation="".

Nimi Tüüp Vaikimisi Kirjeldus
animatsioon tõeväärtus tõsi Rakendage kohtspikrile CSS-i tuhmumise üleminek
konteiner string | element | vale vale

Lisab kohtspikri konkreetsele elemendile. Näide: container: 'body'. See suvand on eriti kasulik, kuna see võimaldab teil asetada kohtspikri dokumendi voos käivitava elemendi lähedale – see takistab tööriistaspikril akna suuruse muutmise ajal käivitavast elemendist eemale hõljuma.
viivitus number | objektiks 0

Tööriistavihje kuvamise ja peitmise viivitus (ms) – ei kehti käsitsi käivitamise tüübi puhul

Kui number on esitatud, rakendatakse viivitust mõlemale peitmisele/näitamisele

Objekti struktuur on järgmine:delay: { "show": 500, "hide": 100 }
html tõeväärtus vale

Luba kohtspikris HTML.

titleKui see on tõene, renderdatakse kohtspikrites olevad HTML-sildid kohtspikris. Kui see on vale, textkasutatakse sisu DOM-i sisestamiseks jQuery meetodit.

Kui olete XSS-i rünnakute pärast mures, kasutage teksti.
paigutus string | funktsiooni 'ülemine'

Kuidas paigutada kohtspikker – auto | ülemine | alumine | vasakule | õige.
Kui autoon määratud, suunab see kohtspikri dünaamiliselt ümber.

Kui funktsiooni kasutatakse paigutuse määramiseks, kutsutakse see välja, mille esimeseks argumendiks on tööriistavihje DOM-sõlm ja teiseks käivitava elemendi DOM-sõlm. Kontekst thismääratakse kohtspikri eksemplarile.
valija string | vale vale Kui valija on ette nähtud, delegeeritakse tööriistavihje objektid määratud sihtmärkidele. Praktikas kasutatakse seda ka tööriistavihjete rakendamiseks dünaamiliselt lisatud DOM-i elementidele ( jQuery.ontugi). Vaadake seda ja informatiivset näidet .
malli string '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Algne HTML, mida kasutada kohtspikri loomisel.

Tööriistavihje titlesüstitakse .tooltip-inner.

.arrowmuutub tööriistaspikri nooleks.

Äärepoolsel ümbriselemendil peaks olema .tooltipklass ja role="tooltip".
pealkiri string | element | funktsiooni ''

Pealkirja vaikeväärtus, kui titleatribuuti pole.

Kui funktsioon on antud, kutsutakse see välja koos thisviitega, mis on seatud elemendile, millele tööriistaspikker on lisatud.
päästik string 'hover fookus'

Kuidas tööriistavihje käivitatakse – klõpsake | hõljuda | keskenduda | manuaal. Võite läbida mitu päästikut; eraldage need tühikuga.

'manual'näitab, et kohtspikker käivitatakse programmiliselt meetodite ja kaudu .tooltip('show'); seda väärtust ei saa kombineerida ühegi teise päästikuga..tooltip('hide').tooltip('toggle')

'hover'üksinda põhjustab vihjeid, mida ei saa klaviatuuri kaudu käivitada, ja neid tuleks kasutada ainult siis, kui on olemas alternatiivsed meetodid sama teabe edastamiseks klaviatuuri kasutajatele.
nihe number | string 0 Tööriistavihje nihe selle sihtmärgi suhtes. Lisateabe saamiseks vaadake Popper.js'i nihkedokumente .
tagavaraPaigutus string | massiivi 'flip' Lubage määrata, millist positsiooni Popper kasutab tagavaraks. Lisateabe saamiseks vaadake Popper.js-i käitumisdokumente
piiri string | element 'scrollParent' Tööriistaspikri ülevoolupiirangu piir. Aktsepteerib 'viewport', 'window', 'scrollParent', või HTMLElementi viite väärtusi (ainult JavaScript). Lisateabe saamiseks vaadake Popper.js'i preventOverflow dokumente .

Andmete atribuudid üksikute kohtspikrite jaoks

Üksikute tööriistavihjete valikuid saab alternatiivselt määrata andmeatribuutide abil, nagu eespool selgitatud.

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

$().tooltip(options)

Kinnitab elemendikogule tööriistaspikri töötleja.

.tooltip('show')

Näitab elemendi kohtspikri. Naaseb helistaja juurde enne, kui vihje on tegelikult näidatud (st enne shown.bs.tooltipsündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks. Nullpikkusega pealkirjadega vihjeid ei kuvata kunagi.

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

.tooltip('hide')

Peidab elemendi kohtspikri. Naaseb helistaja juurde enne, kui kohtspikker on tegelikult peidetud (st enne hidden.bs.tooltipsündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks.

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

.tooltip('toggle')

Lülitab elemendi kohtspikri sisse/välja. Naaseb helistaja juurde enne, kui kohtspikker on tegelikult näidatud või peidetud (st enne shown.bs.tooltipvõi hidden.bs.tooltipsündmuse toimumist). Seda peetakse kohtspikri "käsitsi" käivitamiseks.

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

.tooltip('dispose')

Peidab ja hävitab elemendi kohtspikri. Delegeerimist kasutavaid tööriistavihjeid (mis luuakse suvandiga selector) ei saa järeltulijate päästikuelementide puhul eraldi hävitada.

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

.tooltip('enable')

Annab elemendi kohtspikrile võimaluse kuvada. Tööriistad on vaikimisi lubatud.

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

.tooltip('disable')

Eemaldab elemendi kohtspikri kuvamise võimaluse. Tööriistavihjet saab kuvada ainult siis, kui see on uuesti lubatud.

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

.tooltip('toggleEnabled')

Lülitab elemendi kohtspikri kuvamise või peitmise võimaluse.

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

.tooltip('update')

Värskendab elemendi kohtspikri asukohta.

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

Sündmused

Sündmuse tüüp Kirjeldus
show.bs.tööriistavihje See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
näidatud.bs.tööriistavihje See sündmus käivitatakse, kui kohtspikker on kasutajale nähtavaks tehtud (ootab, kuni CSS-i üleminekud on lõpule viidud).
peida.bs.tööriistavihje See sündmus käivitatakse kohe, kui hideeksemplari meetod on välja kutsutud.
peidetud.bs.tööriistavihje See sündmus käivitatakse, kui kohtspikker on kasutaja eest peitmise lõpetanud (ootab, kuni CSS-i üleminekud on lõpule viidud).
sisestatud.bs.tööriistavihje See sündmus käivitatakse pärast show.bs.tooltipsündmust, kui kohtspikri mall on DOM-i lisatud. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})