Source

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.

Pārskats

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.jskas satur Popper.js!
  • Ja veidojat mūsu JavaScript no avota, tam ir nepieciešamsutil.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 .disabledvai disabledelementi 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.
  • Rīka padomus var aktivizēt, pateicoties elementam ēnu DOM iekšpusē.

Šī komponenta animācijas efekts ir atkarīgs no prefers-reduced-motionmultivides vaicājuma. Skatiet mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .

Vai tas viss ir? Lieliski, redzēsim, kā viņi strādā ar dažiem piemēriem.

Piemērs: iespējojiet rīka padomus visur

Viens veids, kā inicializēt visus rīka padomus lapā, būtu atlasīt tos pēc to data-toggleatribūta:

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

Piemēri

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.

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

Un ar pievienotu pielāgotu HTML:

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

Lietošana

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:

$('#example').tooltip(options)
Pārplūde autounscroll

Rīka padoma pozīcija mēģina automātiski mainīties, ja vecākkonteinerā ir overflow: autovai overflow: scrollpatīk mūsu .table-responsive, taču joprojām tiek saglabāta sākotnējā izvietojuma pozīcija. Lai atrisinātu, iestatiet boundaryopciju uz jebko citu, nevis noklusējuma vērtību 'scrollParent', piemēram 'window':

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

Atzīmes

Rīka padomam nepieciešamais marķējums ir tikai dataatribū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 topspraudnis).

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 tiks pievienotas potenciāli kaitinošas un mulsinošas tabulēšanas pieturas neinteraktīvos elementos, un lielākā daļa palīgtehnoloģiju pašlaik nepaziņo rīka padomu šajā situācijā. Turklāt nepaļaujieties tikai uz hoverjūsu rīka padoma aktivizētāju, jo tas padarīs jūsu rīka padomus neiespējamu tastatūras lietotājiem.

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

Atspējotie elementi

Elementi ar disabledatribū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-eventsatspē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>

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-animation="".

Ņemiet vērā, ka drošības apsvērumu dēļ opcijas sanitize, sanitizeFnun whiteListnevar nodrošināt, izmantojot datu atribūtus.

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: container: 'body'. Šī opcija ir īpaši noderīga, jo tā ļauj novietot rīka padomu dokumenta plūsmā netālu no palaišanas elementa, kas neļaus rīka padomam peldēt prom no aktivizētāja elementa loga lieluma maiņas laikā.
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:delay: { "show": 500, "hide": 100 }
html Būla viltus

Atļaut HTML rīka padomos.

Ja vērtība ir patiesa, HTML tagi rīka padomos titletiks atveidoti rīka padomos. textJa tas ir nepatiess, satura ievietošanai DOM tiks izmantota jQuery metode.

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.
Kad autoir norādīts, tas dinamiski pārorientēs rīka padomu.

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 thisir iestatīts uz rīka padoma instanci.
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 arī, lai lietotu rīka padomus dinamiski pievienotajiem DOM elementiem ( jQuery.onatbalsts). Skatiet šo un informatīvo piemēru .
veidne virkne '<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 titletiks ievadīts .tooltip-inner.

.arrowkļūs par rīka padoma bultiņu.

Vistālākajam iesaiņojuma elementam jābūt .tooltipklasei un role="tooltip".
virsraksts stīga | elements | funkciju ''

Noklusējuma nosaukuma vērtība, ja titleatribūts nav pieejams.

Ja funkcija ir norādīta, tā tiks izsaukta ar thisatsauci, kas iestatīta uz elementu, kuram ir pievienots rīka padoms.
sprūda virkne "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.

'manual'norāda, ka rīka padoms tiks aktivizēts programmatiski, izmantojot .tooltip('show'), .tooltip('hide')un .tooltip('toggle')metodes; šo vērtību nevar apvienot ar nevienu citu aktivizētāju.

'hover'pati par sevi radīs rīka padomus, kurus nevar aktivizēt, izmantojot tastatūru, un tos vajadzētu izmantot tikai tad, ja ir pieejamas alternatīvas metodes vienas un tās pašas informācijas nodošanai tastatūras lietotājiem.
kompensēt numurs | stīga | funkciju 0

Rīka padoma nobīde attiecībā pret tā mērķi.

Ja funkcija tiek izmantota, lai noteiktu nobīdi, tā tiek izsaukta ar objektu, kas satur nobīdes datus kā savu pirmo argumentu. Funkcijai ir jāatgriež objekts ar tādu pašu struktūru. Aktivizējošais elements DOM mezgls tiek nodots kā otrais arguments.

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 .
dezinficēt Būla taisnība Iespējojiet vai atspējojiet dezinfekciju. Ja tas ir aktivizēts 'template', 'title'opcijas tiks dezinficētas.
baltais saraksts objektu Noklusējuma vērtība Objekts, kurā ir atļauti atribūti un tagi
sanitizeFn null | funkciju null Šeit jūs varat nodrošināt savu dezinfekcijas funkciju. Tas var būt noderīgi, ja vēlaties dezinficēšanai izmantot īpašu bibliotēku.
popperConfig null | objektu null Lai mainītu Bootstrap noklusējuma Popper.js konfigurāciju, skatiet sadaļu Popper.js konfigurācija

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

Metodes

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 .

Plašāku informāciju skatiet mūsu JavaScript dokumentācijā .

$().tooltip(options)

Elementu kolekcijai pievieno rīku padomu apdarinātāju.

.tooltip('show')

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.tooltipnotikuma). To uzskata par rīka padoma “manuālu” aktivizēšanu. Rīka padomi ar nulles garuma virsrakstiem nekad netiek rādīti.

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

.tooltip('hide')

Paslēpj elementa rīka padomu. Atgriežas pie zvanītāja, pirms rīka padoms faktiski ir paslēpts (ti, pirms hidden.bs.tooltipnotikuma). To uzskata par rīka padoma “manuālu” aktivizēšanu.

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

.tooltip('toggle')

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.tooltipvai hidden.bs.tooltipnotikuma). To uzskata par rīka padoma “manuālu” aktivizēšanu.

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

.tooltip('dispose')

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.

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

.tooltip('enable')

Nodrošina elementa rīka padomam iespēju tikt parādītam. Rīka padomi ir iespējoti pēc noklusējuma.

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

.tooltip('disable')

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.

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

.tooltip('toggleEnabled')

Pārslēdz iespēju rādīt vai paslēpt elementa rīka padomu.

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

.tooltip('update')

Atjaunina elementa rīka padoma pozīciju.

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

Pasākumi

Pasākuma veids Apraksts
parādīt.bs.rīka padoms Šis notikums tiek aktivizēts nekavējoties, kad showtiek 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 hideir 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.tooltipnotikuma, kad rīka padoma veidne ir pievienota DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})