in English

Baarakɛminɛnw ladilikanw

Sɛbɛnw ni misaliw minnu bɛ kɛ ka Bootstrap baarakɛminɛnw ladamulenw fara ɲɔgɔn kan ni CSS ani JavaScript ye ni CSS3 ye animationw ni data-attributes kama sigida tɔgɔw marali kama.

Kuma bɛɛ lajɛlen

Fɛn minnu ka kan ka dɔn ni i bɛ baara 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.jsye min kɔnɔ Popper bɛ yen walasa baarakɛminɛnw ka se ka baara kɛ!
  • N'i bɛ an ka JavaScript jɔ ka bɔ source la, a bɛ wajibiyautil.js .
  • 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 janya ye zeru 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 .disabledwalima disabledelements 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ɔ.
A daminɛ na, nin yɔrɔ in bɛ baara Kɛ ni kɔnɔkow saniyalan ye min bɛ Dòn a kɔnɔ, o min bɛ HTML fɛn o fɛn Bɔ min ma Sɔn k’a jɛya. Aw ye saniya yɔrɔ lajɛ an ka JavaScript sɛbɛnw kɔnɔ walasa ka kunnafoni wɛrɛw sɔrɔ.
Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲ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 kɛcogo ɲɛ yɔrɔ bɛɛ

Baarakɛminɛnw bɛɛ daminɛcogo dɔ ye ɲɛ dɔ kan o ye k’u sugandi u data-togglecogoya fɛ:

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

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ɛli 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ɛ.

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

Ani ni HTML ladamulen farala a kan:

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

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ɛn in daminɛ JavaScript fɛ:

$('#example').tooltip(options)
Overflow autoaniscroll

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: autoan overflow: scrollka .table-responsive, nka hali bi a bɛ jɔyɔrɔ fɔlɔ jɔyɔrɔ mara. Walasa ka a ɲɛnabɔ, i ka boundarysugandili kɛ fɛn wɛrɛ la min tɛ nafa fɔlɔ ye, 'scrollParent', i n’a fɔ 'window':

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

Markup (Marka) ye

Taamaʃyɛn wajibiyalen min bɛ Kɛ baarakɛminɛn dɔ la o ye datafɛnɲɛnɛma dɔrɔn de ye wa titleHTML 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 topni ‘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-ɲɛnabɔli Kɛ laada la ani minnu bɛ Se ka Kɛ ɲɔgɔn fɛ (i n’a fɔ jὲɲɔgɔnya walima foroko-kɔlɔsili). 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 hoveri 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-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>

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 cogo la, i b’a fɛ ka baarakɛminɛnw daminɛ ka bɔ wrapper <div>walima <span>, ideally made keyboard-focusable using tabindex="0", ani ka override the pointer-eventson the disabled element.

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

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-, i n’a fɔ a bɛ cogo min na data-animation="".

A kɔlɔsi ko lakana kunw kosɔn sanitize, sanitizeFnani whiteListsugandiliw tɛ se ka di ni data attributes ye.
Tɔ̀gɔ Ka sɛbɛen masin na Fɔlɔ Cogojirali
animation (ɲɛnamaya kɛcogo ɲuman). boolean ye sɛbɛ CSS fade transition (CSS fade transition) dɔ kɛ baarakɛminɛnw yɔrɔ la
minɛn kɔnɔ juru | element | nkalon nkalon

A bɛ baarakɛminɛnw ɲɛfɔli fara fɛn kɛrɛnkɛrɛnnen dɔ kan. Misali la: container: 'body'. O sugandili in nafa ka bon kɛrɛnkɛrɛnnenya la bawo a b’a To i bɛ se ka baarakɛminɛnw bila sɛbɛn in bolicogo la min bɛ daminɛ-yɔrɔ kɛrɛfɛ - o bɛna baarakɛminɛn-yɔrɔ bali ka pan ka Bɔ daminɛ-yɔrɔ la finɛtiri bonya caman cili waati la.
ka mɛ jate | minɛn 0 ye

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:delay: { "show": 500, "hide": 100 }
html ye boolean ye nkalon

Aw bɛ HTML to baarakɛminɛnw kɔnɔ.

Ni tiɲɛ don, HTML taamasiyɛn minnu bɛ baarakɛminɛnw kɔnɔ, titleolu bɛna jira baarakɛminɛnw kɔnɔ. Ni nkalon don, jQuery ka textfɛɛrɛ bɛna kɛ ka kɔnɔkow don DOM kɔnɔ.

Baara kɛ ni sɛbɛnni ye ni i bɛ hami XSS binkanniw na.
bilali sen kan juru | baarakunda 'san fɛ'

Baarakɛminɛnw bilacogo - auto | sanfɛ | duguma | kinin fɛ | jo.
Ni autoa ɲɛfɔra, a bɛna baarakɛminɛnw ɲɛminɛcogo kura jira cogo la min bɛ se ka wuli.

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 thiskɔnɔkow bɛ sigi baarakɛminɛnw ɲɛfɔli misali la.
sugandilikɛla juru | nkalon nkalon 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.ondɛmɛ). Aw ye nin lajɛ ani misali min bɛ kunnafoni di .
jatebɔlan gaari '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML ka baara kɛ ni baarakɛminɛnw ɲɛfɔli ye.

Baarakɛminɛnw titlebɛna pikiri kɛ .tooltip-inner.

.arrowbɛna kɛ baarakɛminɛnw ka taamasiyɛn ye.

Kɛnɛma dakun ka kan ka kɛ ni .tooltipkalasi ni role="tooltip".
titiri juru | element | baarakunda '' '' .

Title nafa dafalen ni titleattribut tɛ yen.

Ni baarakɛcogo dɔ dira, a bɛ Weele n'a ka this'reference set ye baarakɛminɛn-sɛbɛn bɛ nɔrɔ min na.
ka ci gaari 'hover focus' ye.

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.

'manual'b’a jira ko baarakɛminɛnw bɛna daminɛ porogaramu fɛ .tooltip('show'), .tooltip('hide')ani .tooltip('toggle')fɛɛrɛw fɛ; o nafa tɛ se ka fara ɲɔgɔn kan ni fɛn wɛrɛ ye min bɛ se ka kɛ sababu ye.

'hover'a yɛrɛ la, o bɛna kɛ sababu ye ka baarakɛminɛnw jira minnu tɛ se ka daminɛ ni klaviyeti ye, wa u ka kan ka baara kɛ dɔrɔn ni fɛɛrɛ wɛrɛw bɛ yen minnu bɛ se ka kunnafoni kelenw lase klaviyeti baarakɛlaw ma.
offset (fɔcogo ɲuman). jate | juru | baarakunda 0 ye

Offset of the tooltip ka kɛɲɛ n’a laɲini ye.

Ni baarakɛcogo dɔ bɛ Kɛ ka 'offset (fɔcogo) Labɛn, a bɛ Weele ni fɛn dɔ ye min kɔnɔ offset (fɔlikan) kunnafoniw bɛ yen k'o Kɛ a ka dalilu fɔlɔ ye. Baarakɛcogo ka kan ka segin fɛn dɔ kan min jɔcogo ye kelen ye. Triggering element DOM node bɛ tɛmɛ i n’a fɔ argument filanan.

Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka offset docs lajɛ .
fallbackBɔli juru | array (ɲɛnajɛ). 'kilape' A to k’a jira Popper bɛna baara kɛ ni jɔyɔrɔ min ye fallback kan. Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka kɛwale sɛbɛnw lajɛ
ladamuKlass 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: 'a b'.

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ɔ.
dankan juru | fɛn 'sɛbɛnni Bangebagaw'. Overflow constraint dancɛ min bɛ baarakɛminɛnw na. A bɛ Sɔn 'viewport', 'window', 'scrollParent', walima HTMLElement ɲɛfɔli dɔ nafaw ma (JavaScript dɔrɔn). Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka preventOverflow docs lajɛ .
ka saniya kɛ boolean ye sɛbɛ Saniyali in daminɛ walima k’a bali. Ni activated 'template'ani 'title'options bɛna sanitize. aw ye saniya yɔrɔ lajɛ an ka JavaScript sɛbɛnw kɔnɔ .
whiteList ye 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 fu 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ɛ.
popperKonfig ye null ka | minɛn fu Walasa ka Bootstrap ka Popper config default Changer, aw ye Popper ka configuration lajɛ

Donanw cogoyaw 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ɛ.

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

$().tooltip(options)

A bɛ baarakɛminɛn dɔ nɔrɔ fɛnw lajɛlen dɔ la.

.tooltip('show')

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

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

.tooltip('hide')

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.tooltipin ka Kɛ). O bɛ jate baarakɛminɛnw ɲɛfɔli “bololanɛgɛ” daminɛni ye.

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

.tooltip('toggle')

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.tooltipwalima hidden.bs.tooltipko kɛlen ka Kɛ). O bɛ jate baarakɛminɛnw ɲɛfɔli “bololanɛgɛ” daminɛni ye.

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

.tooltip('dispose')

A bɛ fɛn dɔ ka baarakɛminɛn dɔ dogo ani k’a Tiɲɛ. Baarakɛminɛn minnu bɛ baara Kɛ ni delegation ye (minnu bɛ Dabɔ ni option selectorye ) tɛ Se ka Tiɲɛ kelen-kelen bɔnsɔn trigger elements kan.

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

.tooltip('enable')

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

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

.tooltip('disable')

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.

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

.tooltip('toggleEnabled')

A bɛ seko caman wuli walasa fɛn dɔ ka baarakɛminɛnw ka jira walima ka dogo.

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

.tooltip('update')

A bɛ fɛn dɔ ka baarakɛminɛnw jɔyɔrɔ sɛmɛntiya.

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

Ko minnu kɛra

Ko kɛlen suguya Cogojirali
jira.bs.baarakɛminɛnw O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni showmisali fɛɛrɛ Weelela.
jiralen.bs.baarakɛminɛnw 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).
dogo.bs.baarakɛminɛnw ɲɛfɔli O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni hidemisali fɛɛrɛ Weelera.
dogolen.bs.baarakɛminɛnw ɲɛfɔli 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.baarakɛminɛnw ɲɛfɔli O ko in bɛ Bɔ ko kɛlen kɔfɛ show.bs.tooltipni baarakɛminɛnw jatebɔlan Fàrala DOM kan. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})