Baarakɛminɛnw ladilikanw

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ɛ mɔgɔ sabanan ka gafemarayɔrɔ Popper kan jɔyɔrɔko la. Aw ka kan ka popper.min.js don ka kɔn bootstrap.js, walima ka baara kɛ ni dɔ ye bootstrap.bundle.min.jsmin kɔnɔ Popper bɛ yen.
• 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ɔ.

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.

Misaliw

Baarakɛminɛnw laadilikanw daminɛ

I n’a fɔ a fɔra cogo min na sanfɛ, aw ka kan ka baarakɛminɛnw daminɛ sani u ka se ka baara kɛ ni u ye. Baarakɛminɛnw bɛɛ daminɛcogo dɔ ɲɛ dɔ kan, o ye k’u sugandi u cogoya fɛ data-bs-toggle, i n’a fɔ:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Baarakɛminɛnw ladilikanw minnu bɛ tali kɛ jɛgɛnsira kan

I bolo digi jukɔrɔla yɔrɔw kan walasa ka baarakɛminɛnw lajɛ:

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Baarakɛminɛn minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye

aw bɛ se ka baarakɛminɛnw cogoya ladilan ni CSS fɛn caman sɛgɛsɛgɛli ye . An bɛ ladamu-kalanso dɔ sigi sen kan ni data-bs-custom-class="custom-tooltip"walasa k’an ka ladamu cogoya scope ani ka baara kɛ n’a ye walasa ka sigida CSS fɛn caman sɛgɛsɛgɛli kɛ.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Yɔrɔ jiracogo

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Ni SVG ye:

CSS ye

Yɛlɛma-yɛlɛmaw

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ min bɛ ka wuli ka taa a fɛ, o hukumu kɔnɔ, baarakɛminɛnw laadilikanw bɛ baara kɛ sisan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye on .tooltipwalasa ka waati yɛrɛyɛrɛ ladamucogo ɲɛ. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Sass bεε bε bεn

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  boundary: document.body // or document.querySelector('#boundary')
})

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

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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ɔ wrapper la <div>walima <span>, min ka fisa ka kɛ klaviyeti-focusable ye ni tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Sugandili minnu bɛ kɛ

I n’a fɔ sugandiliw bɛ se ka tɛmɛ data attributes walima JavaScript fɛ, i bɛ se ka sugandi tɔgɔ dɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-animation="{value}". 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, baara kɛ data-bs-custom-class="beautifier"ni data-bs-customClass="beautifier".

Kabini Bootstrap 5.2.0, yɔrɔw bɛɛ bɛ dɛmɛ don kunnafoni- falen-falen-yɔrɔ-ko -kɛcogodata-bs-config dɔ la min bɛ se ka yɔrɔw labɛncogo nɔgɔmanw bila i n’a fɔ JSON sɛrɛ. Ni fɛn dɔ bɛ data-bs-config='{"delay":0, "title":123}'ni ni data-bs-title="456"fɛnw ye, nafa laban titlebɛna kɛ 456ani kunnafoni danfaralenw bɛna nafaw wuli minnu dira data-bs-config. O tɛmɛnen 'kɔ, kunnafoni-falen-falen-minɛn minnu bɛ yen olu bɛ Se ka JSON nafaw Ladon i n'a fɔ data-bs-delay='{"show":0,"hide":150}'.

Baara kɛ ni baarakɛcogo ye nipopperConfig

const tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Fɛɛrɛw

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Ko minnu kɛra

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
  // do something...
})

tooltip.hide()