Source

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.

Kunnafoni kunbabaw

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 gafemarayɔrɔ Popper.js 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.js bɛ sɔrɔ 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 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 .disabledwalima disabledelements ka kan ka daminɛ wrapper element kan.
  • Ni a daminɛna ka bɔ hyperlinkw la minnu bɛ zana caman bɔ, 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ɔ.

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

Tight pants next level keffiyeh n'a sɔrɔla i ma u mɛn. Foto cabine barbe cru denim letterpress vegan ciden sac stumptown. Foro-ka-tabali seitan, mcsweeney ka fixie sabatilen quinoa 8-bit ameriki finiw bɛ ni terry richardson vinyl chambray ye. Barbu stumptown, cardigans banh mi lomo sanpɛrɛnw. Tofu biodiesel williamsburg marfa, naani loko mcsweeney ka saniya vegan chambray. A tiɲɛ na ironic artisan whatever keytar , scenester foro-ka-tabali banksy Austin twitter bolo freegan cred raw denim kelen-origin kafe viral.

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ɛnw 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ɔn ‘kɔnɔ. Ka fara o kan, 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="".

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 | élément | 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 | élément | 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 fɛ minnu bɛ se ka kɛ sababu ye; u fara ɲɔgɔn kan ni yɔrɔ dɔ ye.

'manual'b’a jira ko baarakɛminɛnw ɲɛfɔli 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 | gaari 0 ye Offset of the tooltip ka kɛɲɛ n’a laɲini ye. Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper.js 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.js ka kɛwale sɛbɛnw lajɛ
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.js ka preventOverflow docs 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 ye zeru janya 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 ɲɛfɔli 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ɛ Weelera.
jiralen.bs.baarakɛminɛnw O ko in bɛ Lawuli 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…
})