Baarakɛminɛnw ladilikanw
Sɛbɛnw ni misaliw ka ɲɛsin Bootstrap baarakɛminɛnw ladamulenw farali kan ni CSS ani JavaScript ye ni CSS3 ye animationw kama ani data-bs-attributes sigida tɔgɔw marali kama.
Kuma bɛɛ lajɛlen
Fɛn minnu ka kan ka dɔn ni baara bɛ kɛ ni baarakɛminɛnw ye:
- Baarakɛminɛnw bɛ tali kɛ 3nan ka bibliothèque Popper kan jɔyɔrɔko la. Aw ka kan ka popper.min.js don a kɔnɔ ka kɔn bootstrap.js ɲɛ walima ka baara kɛ ni
bootstrap.bundle.min.js
/bootstrap.bundle.js
ye min kɔnɔ Popper bɛ sɔrɔ walasa baarakɛminɛnw ka se ka baara kɛ! - Baarakɛminɛnw ladilikanw ye opt-in ye baarakɛcogo kunw na, o la i yɛrɛ ka kan k’u daminɛ .
- Baarakɛminɛn minnu tɔgɔw ye zeru janya ye, olu tɛ jira abada.
- A jira
container: 'body'
walasa ka i yɛrɛ tanga ɲɛfɔli gɛlɛyaw ma yɔrɔw la minnu ka gɛlɛn kosɛbɛ (i n’a fɔ an ka donnakow kuluw, butɔni kuluw, a ɲɔgɔnnaw). - Baarakɛminɛnw bilali daminɛni fɛn dogolenw kan, o tɛna baara kɛ.
- Baarakɛminɛnw ladilikanw for
.disabled
walimadisabled
elements ka kan ka daminɛ wrapper element kan. - Ni a daminɛna ka bɔ hyperlinkw la minnu bɛ zana caman cɛ, baarakɛminɛnw bɛna kɛ cɛmancɛ la. Aw
white-space: nowrap;
bɛ baara kɛ ni aw ka<a>
s ye walasa ka aw yɛrɛ tanga nin kɛcogo in ma. - Baarakɛminɛnw ka kan ka dogo sani u bɛnkanw ka bɔ DOM kɔnɔ.
- Baarakɛminɛnw bɛ Se ka Lawuli k’a sababu Kɛ fɛn dɔ ye min bɛ DOM biɲɛ dɔ kɔnɔ.
prefers-reduced-motion
media ɲininkali de la. aw ye
an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .
I ye o bɛɛ sɔrɔ wa? A ka bon, an k’a lajɛ u bɛ baara kɛ cogo min na ni misali dɔw ye.
Misali: Baarakɛminɛnw ɲɛfɔli kɛ yɔrɔ bɛɛ
Baarakɛminɛnw bɛɛ daminɛcogo dɔ ye ɲɛ dɔ kan o ye k’u sugandi u data-bs-toggle
cogoya fɛ:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Misaliw
I bolo digi jukɔrɔla yɔrɔw kan walasa ka baarakɛminɛnw lajɛ:
Yɔrɔ-sɛbɛnni walasa ka jɛgɛnsira dɔw jira ni baarakɛminɛnw ye. Nin ye sisan filɛri dɔrɔn de ye, mɔgɔfagala tɛ. kɔnɔkow bilalen bɛ yan dɔrɔn walasa ka sɛbɛn lakika sɔrɔli ladege . Wa o bɛɛ bɛ kɛ dɔrɔn walasa ka hakilina di i ma baarakɛminɛnw laadilikanw bɛna kɛ cogo min na ni u bɛ baara kɛ ni u ye diɲɛ ko lakikaw la. O la jigiya b’a la ko i y’a Ye sisan cogo min na nin baarakɛminɛn ninnu bɛ Se ka baara Kɛ waleyali la, n’i y’u Kɛ i yɛrɛ ka siti walima i ka porozɛ kan.
I bolo digi butɔni kan minnu bɛ duguma walasa ka baarakɛminɛnw jiracogo naani ye: sanfɛ, kinin fɛ, duguma ani numan fɛ. Siraw bɛ miiri ni Bootstrap ye RTL kɔnɔ.
<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>
Ani ni HTML ladamulen farala a kan:
<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>
Ni SVG ye:
Sass ye
Yɛlɛma-yɛlɛmaw
$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;
Baarakɛcogo
Baarakɛminɛnw-kumasenw bɛ kɔnɔkow ni taamasiyɛnw Bɔ ɲinini na, wa a bɛ baarakɛminɛnw bila u ka trigger element kɔfɛ.
Baarakɛminɛnw ɲɛfɔli daminɛ JavaScript fɛ:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Overflow auto
aniscroll
Baarakɛminɛnw jɔyɔrɔ b’a ɲini ka fɛn caman Changer a yɛrɛma ni bangebaga minɛn dɔ bɛ overflow: auto
an overflow: scroll
ka .table-responsive
, nka hali bi a bɛ jɔyɔrɔ fɔlɔ jɔyɔrɔ mara. Walasa k’o ɲɛnabɔ, i ka boundary
sugandi (flip modifier ka baara kɛ ni popperConfig
sugandi ye) sigi HTMLElement o HTMLElement kan walasa ka nafa dafalen, 'clippingParents'
, i n’a fɔ document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Markup (Marka) ye
Taamaʃyɛn wajibiyalen min bɛ Kɛ baarakɛminɛn dɔ la o ye data
fɛnɲɛnɛma dɔrɔn de ye wa title
HTML yɔrɔ kan i b’a fɛ ka baarakɛminɛn dɔ Sɔrɔ. Baarakɛminɛn dɔ taamasiyɛn min Sɔrɔla o ka nɔgɔn kosɛbɛ, hali n’a bɛ jɔyɔrɔ dɔ de wajibiya (a daminɛ na, a bɛ Blà ‘sèn na top
ni ‘plugin ye).
Baarakɛminɛnw kɛli ka baara kɛ klaviyeti ni dɛmɛni fɛɛrɛw baarakɛlaw ye
I ka kan ka baarakɛminɛnw dɔrɔn de Fàra HTML yɔrɔw kan minnu bɛ Se ka klaviyeti-yɔrɔ-ko-yɔrɔ-ko laada la ani minnu bɛ Se ka Kɛ ɲɔgɔn fɛ (i n’a fɔ jyɛnnatigɛ-sɛbɛnw walima foroko-kɔlɔsili-minɛnw). Hali ni HTML fɛnw (i n’a fɔ <span>
s) bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka ‘ tabindex="0"
kɔnɔnafili ani k’u hakili ɲagami klaviyeti baarakɛlaw kan minnu tɛ ‘ɲɔgɔndɛmɛ ye, wa dɛmɛn-fɛɛrɛ fanba tɛ baarakɛminɛnko Laseli sisan nin ko in na. Ka fara o kan, i kana i jigi da dɔrɔn kan hover
i n’a fɔ i ka baarakɛminɛnw labɛncogo, bawo o bɛna a to i ka baarakɛminɛnw tɛ se ka daminɛ klaviyeti baarakɛlaw fɛ.
<!-- 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>
Eleman minnu bɛ se ka baara kɛ
Fɛn minnu bɛ ni fɛn ye disabled
, olu tɛ ɲɔgɔndan ye, o kɔrɔ ye ko baarakɛlaw tɛ Se k’u sinsin, k’u jɔ, walima k’u digi walasa ka baarakɛminɛn dɔ (walima popover) dɔ Daminɛ. O kɛcogo la, i b’a fɛ ka baarakɛminɛnw daminɛ ka bɔ dakun dɔ la <div>
walima <span>
, a ka fisa ka kɛ klaviyeti-focusable ye ni 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>
Sugandili minnu bɛ kɛ
Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-bs-
, i n’a fɔ a bɛ cogo min na data-bs-animation=""
. Aw ye aw jija ka sugandili tɔgɔ ka case suguya Changer ka bɔ camelCase la ka kɛ kebab-case ye ni aw bɛ sugandiliw tɛmɛ data attributes fɛ. Misali la, sanni i ka baara kɛ ni data-bs-customClass="beautifier"
, baara kɛ ni data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, ani
allowList
sugandiliw tɛ se ka di ni data attributes ye.
Tɔ̀gɔ | Ka sɛbɛen masin na | Fɔlɔ | Cogojirali |
---|---|---|---|
animation |
boolean ye | true |
CSS fade transition (CSS fade transition) dɔ kɛ baarakɛminɛnw yɔrɔ la |
container |
juru | element | nkalon | false |
A bɛ baarakɛminɛnw ɲɛfɔli fara fɛn kɛrɛnkɛrɛnnen dɔ kan. Misali la: |
delay |
jate | minɛn | 0 |
Baarakɛminɛnw jiracogo ni a dogocogo latɛmɛni (ms) - o tɛ tali kɛ bololabaarakɛminɛn suguya la Ni nimɔrɔ dɔ dira, delay bɛ kɛ hide/show fila bɛɛ la Fɛnw jɔcogo ye: |
html |
boolean ye | false |
Aw bɛ HTML to baarakɛminɛnw kɔnɔ. Ni tiɲɛ don, HTML taamasiyɛn minnu bɛ baarakɛminɛnw kɔnɔ, Baara kɛ ni sɛbɛnni ye ni i bɛ hami XSS binkanniw na. |
placement |
juru | baarakunda | 'top' |
Baarakɛminɛnw bilacogo - auto | sanfɛ | duguma | kinin fɛ | jo. Ni baarakɛcogo dɔ bɛ Kɛ ka yɔrɔ-yɔrɔ-ko Labɛn, a bɛ Weele ni baarakɛminɛn-sɛbɛn DOM node ye a ka dalilu fɔlɔ ye ani 'fɛn min bɛ Daminɛ DOM node ye k'o Kɛ a filanan ye. A |
selector |
juru | nkalon | false |
Ni sugandili dɔ dira, baarakɛminɛnw ɲɛfɔli fɛnw bɛna di laɲini kofɔlenw ma. Tiɲɛ na, o bɛ kɛ ka baarakɛminɛnw fana waleya DOM fɛnw kan minnu bɛ fara ɲɔgɔn kan ni fanga ye ( jQuery.on dɛmɛ). Aw ye nin lajɛ ani misali min bɛ kunnafoni di . |
template |
gaari | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Base HTML ka baara kɛ ni baarakɛminɛnw ɲɛfɔli ye. Baarakɛminɛnw
Kɛnɛma dakun ka kan ka kɛ ni |
title |
juru | element | baarakunda | '' |
Title nafa dafalen ni Ni baarakɛcogo dɔ dira, a bɛ Weele n'a ka |
trigger |
gaari | 'hover focus' |
Baarakɛminɛnw ɲɛfɔli bɛ daminɛ cogo min na - i ka | digi hover | sinsinnan | min bɛ fɛn bolo la. Aw bɛ se ka tɛmɛ fɛn caman kan minnu bɛ se ka kɛ sababu ye; u faranfasi ni yɔrɔ ye.
|
fallbackPlacements |
array (ɲɛnajɛ). | ['top', 'right', 'bottom', 'left'] |
Fallback yɔrɔw ɲɛfɔ ni yɔrɔw lisɛli ye array kɔnɔ (ka kɛɲɛ ni u diyanyekow ye). Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka kɛwale sɛbɛnw lajɛ |
boundary |
juru | fɛn | 'clippingParents' |
Baarakɛminɛnw ka dantigɛli dantigɛli dancɛ (a bɛ tali kɛ Popper ka preventOverflow modifier dɔrɔn de la). Ka da a kan a bɛ 'clippingParents' ani a bɛ Se ka Sɔn HTMLElement 'kɔnɔ (JavaScript dɔrɔn fɛ). Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka detectOverflow docs lajɛ . |
customClass |
juru | baarakunda | '' |
Kalansow fara baarakɛminɛnw kan ni a jiralen don. A kɔlɔsi ko o kalansenw bɛna fara kalansenw kan minnu kofɔlen don jatebɔsen kɔnɔ. Walasa ka kalansen caman fara ɲɔgɔn kan, aw bɛ u faranfasi ni yɔrɔw ye: Aw bɛ se fana ka baarakɛcogo dɔ tɛmɛ min ka kan ka sɛrɛ kelen segin min kɔnɔ kalasi tɔgɔ wɛrɛw bɛ sɔrɔ. |
sanitize |
boolean ye | true |
Saniyali in daminɛ walima k’a bali. Ni activated 'template' ani 'title' options bɛna saniya. aw ye saniya yɔrɔ lajɛ an ka JavaScript sɛbɛnw kɔnɔ . |
allowList |
minɛn | Nafa min bɛ sɔrɔ a daminɛ na | Fɛn min bɛ ni fɛnw ni taamasiyɛnw ye minnu bɛ Sɔ̀rɔ |
sanitizeFn |
null ka | baarakunda | null |
Yan aw bɛ se ka aw yɛrɛ ka sanitize baarakɛcogo di. O bɛ se ka kɛ nafa ye ni aw b’a fɛ ka baara kɛ ni gafemarayɔrɔ kɛrɛnkɛrɛnnen ye walasa ka saniya kɛ. |
offset |
array | juru | baarakunda | [0, 0] |
Offset of the tooltip ka kɛɲɛ n’a laɲini ye. Aw bɛ se ka sɛrɛ dɔ tɛmɛn data attributes kɔnɔ ni nafaw ye minnu faralen don ɲɔgɔn kan ni koma ye i n’a fɔ: Ni baarakɛcogo dɔ bɛ Kɛ ka offset (fɔcogo) dɔn, a bɛ Weele ni fɛn dɔ ye min kɔnɔ popper (poper) bilali, a ka 'reference (fɔlikan) ani popper rects (popper rects) bɛ min na i n'a fɔ a ka argument (fɔlikan) fɔlɔ. Triggering element DOM node bɛ tɛmɛ i n’a fɔ argument filanan. Baarakɛcogo ka kan ka segin sɛrɛkili dɔ kan ni jateden fila ye: . Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka offset docs lajɛ . |
popperConfig |
null ka | fɛn min bɛ kɛ | baarakunda | null |
Walasa ka Bootstrap ka Popper config default Changer, aw ye Popper ka configuration lajɛ . Ni baarakɛcogo dɔ bɛ Kɛ ka Popper labɛncogo Dabɔ, a bɛ Weele ni fɛn dɔ ye min kɔnɔ Bootstrap ka Popper labɛncogo kɔrɔ bɛ yen. A b’i dɛmɛ ka baara kɛ ni default ye ani k’a fara ɲɔgɔn kan ni i yɛrɛ ka configuration ye. Baarakɛcogo ka kan ka segin labɛnni fɛn dɔ kan Popper ye. |
Donanw ka fɛnɲɛnɛmaw ka ɲɛsin baarakɛminɛn kelen-kelen bɛɛ ma
Sugandili minnu bɛ kɛ baarakɛminɛn kelen-kelen bɛɛ la, olu bɛ se ka ɲɛfɔ cogo wɛrɛ la ni kunnafonidilanw cogoyaw ye, i n’a fɔ a ɲɛfɔlen don cogo min na sanfɛ.
Baara kɛ ni baarakɛcogo ye nipopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Fɛɛrɛw
Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli
API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .
aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .
k'a jira
A bɛ element dɔ ka baarakɛminɛnw jira. A bɛ Segin welebaga ma sani baarakɛminɛn in ka jira tiɲɛ na (o kɔrɔ ye ko sani ko shown.bs.tooltip
in ka Kɛ). O bɛ jate baarakɛminɛnw ɲɛfɔli “bololanɛgɛ” daminɛni ye. Baarakɛminɛn minnu tɔgɔw janya ye zeru ye, olu tɛ jira abada.
tooltip.show()
ka dogo
A bɛ fɛn dɔ ka baarakɛminɛn dɔ dogo. A bɛ Segin welebaga ma sani baarakɛminɛn in ka dogo tiɲɛ na (o kɔrɔ ye ko sani ko hidden.bs.tooltip
in ka Kɛ). O bɛ jate baarakɛminɛnw ɲɛfɔli “bololanɛgɛ” daminɛni ye.
tooltip.hide()
toggle (toggle) kɛ
A bɛ fɛn dɔ ka baarakɛminɛnw sɛgɛsɛgɛli wuli. A bɛ Segin welebaga ma sani baarakɛminɛn in ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.tooltip
walima hidden.bs.tooltip
ko kɛlen ka Kɛ). O bɛ jate baarakɛminɛnw ɲɛfɔli “bololanɛgɛ” daminɛni ye.
tooltip.toggle()
ka a fili
A bɛ fɛn dɔ ka baarakɛminɛn dɔ dogo ani k’a tiɲɛ (A bɛ kunnafoni maralenw bɔ DOM fɛn kan). Baarakɛminɛn minnu bɛ baara Kɛ ni delegation ye (minnu bɛ Dabɔ ni option selector
ye ) tɛ Se ka Tiɲɛ kelen-kelen bɔnsɔn trigger elements kan.
tooltip.dispose()
ka yamaruya
A bɛ se di fɛn dɔ ka baarakɛminɛnw ma ka se ka jira. Baarakɛminɛnw ladilikanw bɛ baara kɛ ka daminɛ.
tooltip.enable()
ka lajɔ
A bɛ seko bɔ fɛn dɔ ka baarakɛminɛnw jiracogo la. Baarakɛminɛnw ɲɛfɔli bɛna se ka jira dɔrɔn ni a daminɛna kokura.
tooltip.disable()
toggleA bɛ se ka kɛ
A bɛ seko caman wuli walasa fɛn dɔ ka baarakɛminɛnw ka jira walima ka dogo.
tooltip.toggleEnabled()
ka lakuraya
A bɛ fɛn dɔ ka baarakɛminɛnw jɔyɔrɔ sɛmɛntiya.
tooltip.update()
getInstance ye
Fɛɛrɛ jɔlen min b’a To i bɛ se ka baarakɛminɛn instansi Sɔrɔ min bɛ tali Kɛ DOM fɛn dɔ la
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
sɔrɔWala ka Instance Dabɔ
Fɛɛrɛ jɔlen min b’a To i bɛ se ka baarakɛminɛn instansi Sɔrɔ min bɛ tali Kɛ DOM yɔrɔ dɔ la, walima ka kura Dabɔ n’a sɔrɔla a ma Daminɛ
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Ko minnu kɛra
Ko kɛlen suguya | Cogojirali |
---|---|
show.bs.tooltip |
O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni show misali fɛɛrɛ Weelera. |
shown.bs.tooltip |
O ko in bɛ Bɔ ni baarakɛminɛnw ɲɛfɔli Kɛra baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban). |
hide.bs.tooltip |
O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni hide misali fɛɛrɛ Weelera. |
hidden.bs.tooltip |
O ko in bɛ Fɔ ni baarakɛminɛnw dogolen ye baarakɛla la (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban). |
inserted.bs.tooltip |
O ko in bɛ Bɔ ko kɛlen kɔfɛ show.bs.tooltip ni baarakɛminɛnw jatebɔlan Fàrala DOM kan. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()