Rīku padomi
Dokumentācija un piemēri pielāgotu Bootstrap rīkpadomu pievienošanai ar CSS un JavaScript, izmantojot CSS3 animācijām un data-bs-atribūtus 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 . Lai rīka padomi darbotos, pirms bootstrap.js jāiekļauj popper.min.js vai jāizmanto
bootstrap.bundle.min.js
/bootstrap.bundle.js
kas satur Popper! - 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.
- Rīka padomus var aktivizēt, pateicoties elementam ēnu DOM iekšpusē.
prefers-reduced-motion
multivides vaicājuma. Skatiet
mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .
Vai to visu sapratāt? 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-bs-toggle
atribūta:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Piemēri
Virziet kursoru virs tālāk esošajām saitēm, lai skatītu rīka padomus:
Viettura teksts, lai parādītu dažas iekļautās saites ar rīka padomiem. Tagad tas ir tikai pildījums, nevis slepkava. Šeit ievietots saturs, lai atdarinātu reāla teksta klātbūtni . Un tas viss, lai sniegtu jums priekšstatu par to, kā rīka padomi izskatītos, ja tos izmantotu reālās situācijās. Cerams, ka tagad esat redzējis , kā šie saišu rīka padomi var darboties praksē, kad tos izmantosit savā vietnē vai projektā.
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. Norādes tiek atspoguļotas, izmantojot Bootstrap RTL.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Un ar pievienotu pielāgotu HTML:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Ar SVG:
Sass
Mainīgie lielumi
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
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:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Pārplūde auto
unscroll
Rīka padoma pozīcija mēģina automātiski mainīties, ja vecākkonteinerā ir overflow: auto
vai overflow: scroll
patīk mūsu .table-responsive
, taču joprojām tiek saglabāta sākotnējā izvietojuma pozīcija. Lai to atrisinātu, iestatiet boundary
opciju (apvēršanas modifikatoram, izmantojot popperConfig
opciju) uz jebkuru HTMLElement, lai ignorētu noklusējuma vērtību 'clippingParents'
, piemēram document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Atzīmes
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 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 hover
jū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-bs-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="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Atspējotie elementi
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ā tastatūras fokusēšanas, izmantojot tabindex="0"
.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" 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-bs-
, tāpat kā data-bs-animation=""
. Nododot opcijas, izmantojot datu atribūtus, noteikti nomainiet opcijas nosaukuma reģistra veidu no camelCase uz kebab-case. Piemēram, tā vietā, lai izmantotu data-bs-customClass="beautifier"
, izmantojiet data-bs-custom-class="beautifier"
.
sanitize
opcijas
sanitizeFn
, un
allowList
opcijas nevar nodrošināt, izmantojot datu atribūtus.
Vārds | Tips | Noklusējums | Apraksts |
---|---|---|---|
animation |
Būla | true |
Rīka padomam izmantojiet CSS izbalēšanas pāreju |
container |
stīga | elements | viltus | false |
Pievieno rīka padomu noteiktam elementam. Piemērs: |
delay |
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 | false |
Atļaut HTML rīka padomos. Ja vērtība ir patiesa, rīka padomos HTML tagi Izmantojiet tekstu, ja uztraucaties par XSS uzbrukumiem. |
placement |
stīga | funkciju | 'top' |
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 |
selector |
stīga | viltus | false |
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.on atbalsts). Skatiet šo un informatīvo piemēru . |
template |
stīga | '<div class="tooltip" role="tooltip"><div class="tooltip-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 |
title |
stīga | elements | funkciju | '' |
Noklusējuma nosaukuma vērtība, ja Ja funkcija ir norādīta, tā tiks izsaukta ar |
trigger |
stīga | 'hover focus' |
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.
|
fallbackPlacements |
masīvs | ['top', 'right', 'bottom', 'left'] |
Definējiet rezerves izvietojumus, nodrošinot izvietojumu sarakstu masīvā (priekšrocību secībā). Papildinformāciju skatiet Popera uzvedības dokumentos |
boundary |
stīga | elements | 'clippingParents' |
Rīka padoma pārpildes ierobežojuma robeža (attiecas tikai uz Popera preventīvā pārpildes modifikatoru). Pēc noklusējuma tas ir 'clippingParents' un var pieņemt HTMLElement atsauci (tikai izmantojot JavaScript). Lai iegūtu papildinformāciju, skatiet Popper's detectOverflow dokumentus . |
customClass |
stīga | funkciju | '' |
Pievienojiet klases rīka padomam, kad tas tiek parādīts. Ņemiet vērā, ka šīs klases tiks pievienotas papildus visām veidnē norādītajām klasēm. Lai pievienotu vairākas klases, atdaliet tās ar atstarpēm: Varat arī nodot funkciju, kurai jāatgriež viena virkne, kas satur papildu klašu nosaukumus. |
sanitize |
Būla | true |
Iespējojiet vai atspējojiet dezinfekciju. Ja tas ir aktivizēts 'template' , 'title' opcijas tiks dezinficētas. Skatiet mūsu JavaScript dokumentācijas sadaļu par dezinfekcijas līdzekļiem . |
allowList |
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. |
offset |
masīvs | stīga | funkciju | [0, 0] |
Rīka padoma nobīde attiecībā pret tā mērķi. Datu atribūtos varat nodot virkni ar komatu atdalītām vērtībām, piemēram: When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: For more information refer to Popper's offset docs. |
popperConfig |
null | object | function | null |
To change Bootstrap's default Popper config, see Popper's configuration. When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
Data attributes for individual tooltips
Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
Using function with popperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
show
Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip
event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.
tooltip.show()
hide
Hides an element’s tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the hidden.bs.tooltip
event occurs). This is considered a “manual” triggering of the tooltip.
tooltip.hide()
toggle
Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the shown.bs.tooltip
or hidden.bs.tooltip
event occurs). This is considered a “manual” triggering of the tooltip.
tooltip.toggle()
dispose
Hides and destroys an element’s tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using the selector
option) cannot be individually destroyed on descendant trigger elements.
tooltip.dispose()
enable
Gives an element’s tooltip the ability to be shown. Tooltips are enabled by default.
tooltip.enable()
disable
Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
tooltip.disable()
toggleEnabled
Toggles the ability for an element’s tooltip to be shown or hidden.
tooltip.toggleEnabled()
update
Updates the position of an element’s tooltip.
tooltip.update()
getInstance
Static method which allows you to get the tooltip instance associated with a DOM element
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
Static method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Events
Event type | Description |
---|---|
show.bs.tooltip |
This event fires immediately when the show instance method is called. |
shown.bs.tooltip |
This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.tooltip |
This event is fired immediately when the hide instance method has been called. |
hidden.bs.tooltip |
This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
inserted.bs.tooltip |
This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()