Rīku padomi
Dokumentācija un piemēri pielāgotu Bootstrap rīka padomu pievienošanai ar CSS un JavaScript, izmantojot CSS3 animācijām un datu atribūtiem vietējai virsrakstu glabāšanai.
Lietas, kas jāzina, izmantojot rīka padomu spraudni:
- Rīka padomi pozicionēšanai balstās uz trešās puses bibliotēku Popper.js . Lai rīka padomi darbotos, pirms bootstrap.js ir jāiekļauj popper.min.js vai jāizmanto
bootstrap.bundle.min.js
/bootstrap.bundle.js
kas satur Popper.js! - Ja veidojat mūsu JavaScript no avota, tam ir nepieciešams
util.js
. - Rīka padomi tiek izvēlēti veiktspējas iemeslu dēļ, tāpēc jums tie ir jāinicializē pašam .
- Rīka padomi ar nulles garuma virsrakstiem nekad netiek rādīti.
- Norādiet
container: 'body'
, lai izvairītos no renderēšanas problēmām sarežģītākos komponentos (piemēram, mūsu ievades grupās, pogu grupās utt.). - Rīka padomu aktivizēšana slēptajos elementos nedarbosies.
- Rīka padomi
.disabled
vaidisabled
elementi ir jāaktivizē iesaiņojuma elementā. - Ja to aktivizē hipersaites, kas aptver vairākas rindiņas, rīka padomi tiks centrēti. Izmantojiet
white-space: nowrap;
,<a>
lai izvairītos no šādas uzvedības. - Rīka padomi ir jāpaslēpj, pirms tiem atbilstošie elementi tiek noņemti no DOM.
Vai to visu sapratāt? Lieliski, redzēsim, kā viņi strādā ar dažiem piemēriem.
Viens veids, kā inicializēt visus rīka padomus lapā, būtu atlasīt tos pēc to data-toggle
atribūta:
Virziet kursoru virs tālāk esošajām saitēm, lai skatītu rīka padomus:
Stingras bikses nākamā līmeņa keffiyeh jūs, iespējams , neesat dzirdējuši par tām. Foto kabīne bārda neapstrādāta džinsa augstspiedes vegāna kurjera soma stumptown. Seitans no lauku saimniecības līdz galdam, Mcsweeney's fixie ilgtspējīgs quinoa 8 bitu amerikāņu apģērbs ar frotē Ričardsona vinila šambreju. Beard stumptown, jakas banh mi lomo thundercats. Tofu biodīzeļdegviela williamsburg marfa, četras loko mcsweeney's cleanse vegan chambray. Patiešām ironisks amatnieks neatkarīgi no keytar , scenester no saimniecības līdz galdam banksy Austin twitter rokturis freegan cred neapstrādāta džinsa vienas izcelsmes kafijas vīruss.
Novietojiet kursoru virs tālāk esošajām pogām, lai skatītu četrus rīka padomu norādes: augšā, pa labi, apakšā un pa kreisi.
Un ar pievienotu pielāgotu HTML:
Rīkpadomu spraudnis ģenerē saturu un marķējumu pēc pieprasījuma un pēc noklusējuma ievieto rīka padomus aiz to aktivizētāja elementa.
Aktivizējiet rīka padomu, izmantojot JavaScript:
Rīka padomam nepieciešamais marķējums ir tikai data
atribūts title
, un HTML elementā, kuram vēlaties izveidot rīka padomu. Rīka padoma ģenerētais marķējums ir diezgan vienkāršs, lai gan tam ir nepieciešama pozīcija (pēc noklusējuma to iestatījis top
spraudnis).
Rīka padomu izmantošana tastatūras un palīgtehnoloģiju lietotājiem
Rīka padomi jāpievieno tikai tiem HTML elementiem, kas tradicionāli ir orientēti uz tastatūru un ir interaktīvi (piemēram, saites vai veidlapas vadīklas). Lai gan patvaļīgus HTML elementus (piemēram, <span>
s) var padarīt fokusējamus, pievienojot tabindex="0"
atribūtu, tastatūras lietotājiem tastatūras lietotājiem neinteraktīvos elementos tiks pievienotas potenciāli kaitinošas un mulsinošas tabulēšanas pieturas. Turklāt lielākā daļa palīgtehnoloģiju pašlaik nepaziņo rīka padomu šajā situācijā.
Turklāt nepaļaujieties tikai uz hover
jūsu rīka padoma aktivizētāju, jo tas padarīs jūsu rīka padomus neiespējamu tastatūras lietotājiem.
Elementi ar disabled
atribūtu nav interaktīvi, tas nozīmē, ka lietotāji nevar fokusēt, virzīt kursoru vai noklikšķināt uz tiem, lai aktivizētu rīka padomu (vai uznirstošo logu). Kā risinājums ir jāiedarbina rīka padoms no iesaiņojuma <div>
vai <span>
ideālā gadījumā, ja tastatūras fokuss ir piemērots, izmantojot tabindex="0"
, un ignorēt pointer-events
atspējotajā elementā esošo elementu.
<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>
Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-
, tāpat kā data-animation=""
.
Vārds | Tips | Noklusējums | Apraksts |
---|---|---|---|
animācija | Būla | taisnība | Rīka padomam izmantojiet CSS izbalēšanas pāreju |
konteiners | stīga | elements | viltus | viltus | Pievieno rīka padomu noteiktam elementam. Piemērs: |
kavēšanās | numurs | objektu | 0 | Rīka padoma rādīšanas un slēpšanas aizkave (ms) — neattiecas uz manuālo palaišanas veidu Ja tiek norādīts numurs, aizkave tiek piemērota gan slēpšanai/rādīšanai Objekta struktūra ir šāda: |
html | Būla | viltus | Atļaut HTML rīka padomos. Ja vērtība ir patiesa, rīka padomos HTML tagi Izmantojiet tekstu, ja uztraucaties par XSS uzbrukumiem. |
izvietojumu | stīga | funkciju | 'tops' | Kā novietot rīka padomu - auto | uz augšu | apakšā | pa kreisi | pa labi. Ja funkcija tiek izmantota, lai noteiktu izvietojumu, tā tiek izsaukta ar rīka padoma DOM mezglu kā pirmo argumentu un trigerēšanas elementu DOM mezglu kā otro. Konteksts |
atlasītājs | stīga | viltus | viltus | Ja ir nodrošināts atlasītājs, rīka padomu objekti tiks deleģēti norādītajiem mērķiem. Praksē to izmanto, lai dinamiskam HTML saturam iespējotu uznirstošo logu pievienošanu. Skatiet šo un informatīvo piemēru . |
veidne | stīga | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Pamata HTML, kas jāizmanto, veidojot rīka padomu. Rīka padoms
Vistālākajam iesaiņojuma elementam jābūt |
virsraksts | stīga | elements | funkciju | '' | Noklusējuma nosaukuma vērtība, ja Ja funkcija ir norādīta, tā tiks izsaukta ar |
sprūda | stīga | "fokuss virs kursora" | Kā tiek aktivizēts rīka padoms — noklikšķiniet uz | lidināties | fokuss | rokasgrāmata. Jūs varat nodot vairākus trigerus; atdaliet tos ar atstarpi.
|
kompensēt | numurs | stīga | 0 | Rīka padoma nobīde attiecībā pret tā mērķi. Papildinformāciju skatiet Popper.js ofseta dokumentos . |
atkāpšanāsIzvietojums | stīga | masīvs | "apgriezt" | Ļaujiet norādīt, kuru pozīciju Popper izmantos atkāpšanās gadījumā. Papildinformāciju skatiet Popper.js uzvedības dokumentos |
robeža | stīga | elements | 'scrollParent' | Rīka padoma pārpildes ierobežojuma robeža. Pieņem vērtības 'viewport' , 'window' , 'scrollParent' vai HTMLElement atsauci (tikai JavaScript). Papildinformāciju skatiet dokumentā Popper.js preventOverflow . |
Datu atribūti atsevišķiem rīka padomiem
Atsevišķu rīka padomu opcijas var arī norādīt, izmantojot datu atribūtus, kā paskaidrots iepriekš.
Asinhronās metodes un pārejas
Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .
Elementu kolekcijai pievieno rīku padomu apdarinātāju.
Parāda elementa rīka padomu. Atgriežas pie zvanītāja, pirms rīka padoms ir faktiski parādīts (ti, pirms shown.bs.tooltip
notikuma). To uzskata par rīka padoma “manuālu” aktivizēšanu. Rīka padomi ar nulles garuma virsrakstiem nekad netiek rādīti.
Paslēpj elementa rīka padomu. Atgriežas pie zvanītāja, pirms rīka padoms faktiski ir paslēpts (ti, pirms hidden.bs.tooltip
notikuma). To uzskata par rīka padoma “manuālu” aktivizēšanu.
Pārslēdz elementa rīka padomu. Atgriežas pie zvanītāja, pirms rīka padoms ir faktiski parādīts vai paslēpts (ti, pirms shown.bs.tooltip
vai hidden.bs.tooltip
notikuma). To uzskata par rīka padoma “manuālu” aktivizēšanu.
Paslēpj un iznīcina elementa rīka padomu. Rīka padomus, kuros tiek izmantota deleģēšana (kas tiek izveidoti, izmantojot opciju selector
) , nevar atsevišķi iznīcināt pēcnācēju aktivizētāja elementiem.
Nodrošina elementa rīka padomam iespēju tikt parādītam. Rīka padomi ir iespējoti pēc noklusējuma.
Noņem iespēju rādīt elementa rīka padomu. Rīka padomu varēs parādīt tikai tad, ja tas būs atkārtoti iespējots.
Pārslēdz iespēju rādīt vai paslēpt elementa rīka padomu.
Atjaunina elementa rīka padoma pozīciju.
Pasākuma veids | Apraksts |
---|---|
parādīt.bs.rīka padoms | Šis notikums tiek aktivizēts nekavējoties, kad show tiek izsaukta instances metode. |
parādīts.bs.rīka padoms | Šis notikums tiek aktivizēts, kad rīka padoms ir padarīts redzams lietotājam (pagaidīs, kamēr CSS pārejas tiks pabeigtas). |
slēpt.bs.rīka padoms | Šis notikums tiek aktivizēts nekavējoties, kad hide ir izsaukta instances metode. |
slēptās.bs.rīka padoms | Šis notikums tiek aktivizēts, kad rīka padoms ir beidzies paslēpt no lietotāja (tiks gaidīts, līdz tiks pabeigtas CSS pārejas). |
ievietots.bs.rīka padoms | Šis notikums tiek aktivizēts pēc show.bs.tooltip notikuma, kad rīka padoma veidne ir pievienota DOM. |