Hmanraw hman dan tur
Animation atan CSS3 hmanga CSS leh JavaScript hmanga custom Bootstrap tooltips dah belh dan tur documentation leh entirnan leh local title storage atan data-bs-attribute te.
A tlangpuiin
Tooltip plugin hman huna hriat tur awmte:
- Tooltips hian positioning atan 3rd party library Popper a ring tlat a ni. Tooltips a thawh theih nan bootstrap.js hmain popper.min.js i dah hmasa tur a ni emaw, Popper awmna
bootstrap.bundle.min.js
/ hmang tur a ni!bootstrap.bundle.js
- Tooltips hi performance avanga opt-in a nih avangin nangmah ngeiin i initialize tur a ni .
- Zero-length title nei tooltip te hi a lang ngai lo.
container: 'body'
Component complex zawk (kan input group, button group, etc)-a rendering problem awm loh nan specify rawh .- Hidden elements-a tooltips trigger hian hna a thawk dawn lo.
- Tooltips for
.disabled
ordisabled
elements te chu wrapper element ah trigger tur a ni. - Line tam tak huam chhunga hyperlink atanga trigger a nih chuan tooltips te chu centered a ni ang. Hetiang thiltih hi pumpelh nan
white-space: nowrap;
i s hmangin hmang rawh .<a>
- Tooltips te hi DOM atanga an element inmil te an paih hmain thup hmasak phawt a ngai a ni.
- Shadow DOM chhunga element awm avangin tootips hi a trigger thei a ni.
prefers-reduced-motion
media query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la
.
Chutiang zawng zawng chu i nei em? A ropui hle mai, entirnan thenkhat nen an hnathawh dan i en ang u.
Entirnan: Hmun tinah tooltips enable rawh
Page pakhata tooltip zawng zawng initialize dan pakhat chu an data-bs-toggle
attribute hmanga thlan hi a ni ang:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Entirna te
A hnuaia link te hi hover la, tooltips i hmu ang:
Tooltips hmanga inline link thenkhat entir nan placeholder text . Hei hi tunah chuan filler mai a ni tawh a, killer a awm tawh lo. Hetah hian thuziak tak tak awmna ang chia dah mai mai tur thupui dah a ni . Tin, chu zawng zawng chu khawvel tak tak dinhmuna hman a nih chuan toltips te hi engtin nge a awm ang tih ngaihtuahna pe turin chauh a ni. Chuvangin tunah chuan link-a heng tooltips te hi engtin nge practice-a a thawh theih tih i hmu tawh ngei ka beisei , vawi khat chu i site emaw project emaw -ah i hman tawh chuan.
A hnuaia button-te chungah hian hover la, tooltips direction pali: chunglam, dinglam, hnuai lam, leh veilam te chu i hmu ang. RTL a Bootstrap hman hian directions a mirror thin.
<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>
Tin, custom HTML a dah belh bawk a:
<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>
SVG hmangin:
Sass a ni
Variables te pawh a awm
$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;
Hman dan tur
Tooltip plugin hian content leh markup on demand a siam a, default-in tooltip te chu an trigger element hnuaiah a dah thin.
JavaScript hmangin tooltip chu trigger la:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Overflow auto
lehscroll
Tooltip position hian parent container- in kan , a neih overflow: auto
emaw, a duh emaw hunah automatic-in a thlak tum a , mahse original placement-a positioning chu a la vawng reng tho. Chumi chinfel nan chuan option (option hmanga flip modifier tan) chu HTMLElement eng pawhah set la, default value override turin, , chu chu :overflow: scroll
.table-responsive
boundary
popperConfig
'clippingParents'
document.body
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Markup a ni
Tooltip atana markup mamawh chu data
attribute chauh a ni a title
, HTML element-ah chuan tooltip neih i duh a ni. Tooltip pakhata markup siam chu a awlsam deuh a, mahse position (by default-ah top
chuan plugin-in a set) a ngai a ni.
Keyboard leh assistive technology hmangtute tana hmanraw tangkai tak siam
HTML elements hmanlai keyboard-focusable leh interactive (link emaw form control ang chi)-ah chauh tooltips i dah tur a ni. Attribute dah belh hian arbitrary HTML elements ( <span>
s ang chi) chu focusable-a siam theih ni mah se tabindex="0"
, hei hian keyboard hmangtute tan non-interactive element-ah tab stop tibuaitu leh buaithlak thei a dah belh ang a, tunah hian assistive technology tam zawk chuan hetiang dinhmunah hian tooltip hi an puang lo. hover
Tin, i tooltip atana trigger atan chauh rinchhan suh , hei hian keyboard hmangtute tan i tooltip te chu trigger theih a nih loh phah dawn a ni.
<!-- 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>
Elements tihtawp a ni
Attribute nei elements te disabled
hi interactive an ni lo va, chu chu users te chuan tooltip (or popover) trigger turin an focus thei lo va, an hover thei lo va, an click thei lo tihna a ni. Workaround atan chuan tooltip chu wrapper atanga trigger <div>
emaw <span>
, ideally made keyboard-focusable using 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>
Thil thlan theih a ni
Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-bs-
, data-bs-animation=""
. Data attribute hmanga options pass dawnin option hming case type chu camelCase atanga kebab-case ah thlak ngei ngei tur a ni. Entirnan, , hmang data-bs-customClass="beautifier"
lovin data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, leh
allowList
option te hi data attribute hmangin supply theih a ni lo tih hre reng ang che.
Hming | Lampang | Hlawhchhamna | Hrilhfiahna |
---|---|---|---|
animation |
boolean a ni | true |
Tooltip ah CSS fade transition hmangin apply rawh |
container |
string | element | diklo | false |
Tooltip chu element bik pakhatah a append thin. Entirnan: |
delay |
number | thil | 0 |
Tooltip (ms) entir leh thup hun sawn hlat - manual trigger type-ah chuan a hman theih loh Number supply a nih chuan hide/show pahnih ah delay a awm vek a ni Thil awm dan tur chu: |
html |
boolean a ni | false |
Tooltip ah HTML phalsak rawh. A dik a nih chuan tooltip's a HTML tags te chu tooltip XSS attack i ngaihtuah chuan text hmang rawh. |
placement |
string | thiltih | 'top' |
Tooltip dah dan tur - auto | chunglam | hnuai lam | veilam | dik. Function pakhat chu placement hriat nan hman a nih chuan tooltip DOM node chu a argument hmasa ber atan leh triggering element DOM node chu a pahnihna atan hmangin koh a ni. Context chu |
selector |
string | diklo | false |
Selector pek a nih chuan tooltip objects chu target tarlan te hnenah delegate a ni ang. jQuery.on Practice-ah chuan hei hi dynamically added DOM elements ( support)-a tooltips hmanna atan pawh hman a ni. Hei hi leh entîrna thu hriat theihna en rawh . |
template |
hrui | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Tooltip siam huna hman tur HTML base rawh. Tooltip's
Wrapper element pawn lam ber chuan |
title |
string | element | thiltih | '' |
Function pek a nih chuan a |
trigger |
hrui | 'hover focus' |
Tooltip a trigger dan - | tih kha click la hover rawh | focus | kuta thawh. Trigger tam tak i pass thei a; space hmangin then hran rawh.
|
fallbackPlacements |
array a ni | ['top', 'right', 'bottom', 'left'] |
Fallback placement te chu array-a placement list (preference angin) pein define rawh. Hriat belh duh chuan Popper-a behavior docs en rawh |
boundary |
string | thil bul | 'clippingParents' |
Tooltip-a overflow constraint boundary (Popper-a preventOverflow modifier-ah chauh hman tur a ni). Default-ah chuan 'clippingParents' HTMLElement reference a ni a, a pawm thei bawk (JavaScript hmang chauh). Hriat belh duh chuan Popper-a detectOverflow docs en rawh. |
customClass |
string | thiltih | '' |
Tooltip a rawn lan hunah class te dah belh rawh. Template-a class tarlan zawng zawng bakah heng class te hi dah belh a ni ang tih hre reng ang che. Class tam tak dah belh tur chuan space hmangin then rawh: Class hming dang awmna string pakhata rawn pe chhuak tur function pawh i pass thei bawk. |
sanitize |
boolean a ni | true |
Sanitization hi enable emaw disable emaw theih a ni. Activate a nih chuan 'template' leh 'title' options te chu sanitized a ni ang. Kan JavaScript documentation a sanitizer tih hi en la . |
allowList |
thil | Default value a ni | Object ah chuan attribute leh tag phalsak te a awm |
sanitizeFn |
null | thiltih | null |
Hetah hian mahni sanitize function i supply thei ang. Sanitization tih nan library bik hman i duh chuan hei hi a tangkai thei hle. |
offset |
array | string | thiltih | [0, 0] |
Tooltip chu a target nena khaikhin chuan offset a ni. Data attribute-ah hian comma separated value hmangin string i pass thei ang: Offset hriat nan function hman a nih chuan a argument hmasa ber atan popper placement, reference leh popper rects te awmna object hmangin koh a ni. Triggering element DOM node chu argument pahnihna atan pass a ni. Function hian number pahnih nei array a rawn pe chhuak tur a ni: . Hriat belh duh chuan Popper-a offset docs en rawh. |
popperConfig |
null | thil awmze nei | thiltih | null |
Bootstrap-a Popper config default thlak tur chuan Popper-a configuration en rawh . Popper configuration siamna atana function hman a nih chuan Bootstrap-a default Popper configuration awmna object hmangin koh a ni. Default chu i configuration nen hman leh merge turin a pui che a ni. Function hian Popper tan configuration object a rawn pe chhuak tur a ni. |
Tooltip hrang hrang atana data attribute te
Tooltip hrang hrang atana option hrang hrangte chu a dangin data attribute hmanga tarlan theih a ni a, a chunga kan sawi tawh ang khan.
Function hman dan nenpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Thiltih dan tur
Asynchronous method leh inthlak danglamna te
API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .
lantir
Element pakhat tooltip a pholang. Tooltip a lan tak tak hmain (chu chu shown.bs.tooltip
event a thlen hmain) caller hnenah a kir leh thin. Hei hi tooltip “manual” triggering anga ngaih a ni. Zero-length title nei tootip te hi a lang ngai lo.
tooltip.show()
biru
Element pakhat tooltip a thup thin. Tooltip a thup tak tak hmain (chu chu hidden.bs.tooltip
event a thlen hmain) caller hnenah a kir leh thin. Hei hi tooltip “manual” triggering anga ngaih a ni.
tooltip.hide()
toggle a ni
Element pakhat tooltip a toggle thin. Tooltip a lan tak tak emaw a thup hma emaw (chu chu shown.bs.tooltip
or hidden.bs.tooltip
event a thlen hma) caller hnenah a kir leh thin. Hei hi tooltip “manual” triggering anga ngaih a ni.
tooltip.toggle()
paih chhuak rawh
Element pakhat tooltip a thup a, a tichhia (DOM element a data dahkhawmte a paih chhuak thin). Delegation hmanga siam Tooltips ( option hmanga siamselector
) te chu descendant trigger elements ah pakhat zel tihchhiat theih a ni lo.
tooltip.dispose()
theih tir
Element pakhat tooltip chu a lantir theihna a pe. Tooltips hi default-in a enable a ni.
tooltip.enable()
ramtuileilo
Element pakhat tooltip a lan theihna tur a paih chhuak. Tooltip hi re-enable a nih chauhvin a lang thei ang.
tooltip.disable()
toggleEnabled a ni
Element pakhat tooltip tarlan emaw thup emaw theihna tur a toggle thin.
tooltip.toggleEnabled()
tharlam
Element pakhat tooltip awmna hmun a update thin.
tooltip.update()
GetInstance tih a ni
Static method hmanga DOM element nena inzawm tooltip instance hmuh theihna tur
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
GetOrCreateInstance tih theih a ni
Static method hmangin DOM element nena inzawm tooltip instance chu i hmu thei a, a nih loh leh initialized a nih loh chuan a thar siam theih a ni bawk
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Thil thlengte
Event chi hrang hrang | Hrilhfiahna |
---|---|
show.bs.tooltip |
show He event hi instance method kan koh chuan a fire nghal vek a ni. |
shown.bs.tooltip |
He event hi tooltip chu user-in a hmuh theiha siam a nih hunah a fire a ni (CSS transition zawh hun a nghak ang). |
hide.bs.tooltip |
hide He event hi instance method koh a nih chuan a fire nghal a ni. |
hidden.bs.tooltip |
He event hi tooltip chu user hnen atanga thup a nih zawh chuan a fire thin (CSS transitions zawh hun a nghak ang). |
inserted.bs.tooltip |
show.bs.tooltip He event hi DOM-a tooltip template dah a nih hunah event zawhah fire a ni. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()