Nnwinnade Ho Afotu

Nsɛm a Wɔaka abom

Nneɛma a ɛsɛ sɛ wuhu bere a wode tooltip plugin no redi dwuma no:

• Nnwinnade ho nsɛm de ne ho to nhomakorabea a ɛto so abiɛsa Popper so ma gyinabea. Ɛsɛ sɛ wode popper.min.js ka ho ansa na bootstrap.js, anaasɛ wode biako bootstrap.bundle.min.jsa Popper wom di dwuma.
• Tooltips yɛ opt-in esiane adwumayɛ nti, enti ɛsɛ sɛ w’ankasa wufi ase .
• Nnwinnade ho nsɛm a ɛwɔ asɛmti a ne tenten yɛ zero no nkyerɛ da.
• Kyerɛkyerɛ container: 'body'sɛnea wobɛkwati nkyerɛase ho haw ahorow wɔ afã horow a ɛyɛ den kɛse mu (te sɛ yɛn nsɛm a wɔde hyɛ mu akuw, bɔtn akuw, ne nea ɛkeka ho).
• Nnwinnade ho nsɛm a wobɛkanyan wɔ nneɛma a ahintaw so no rennyɛ adwuma.
• Ɛsɛ sɛ wɔde adwinnade afotu ma .disabledanaa disabledelement ahorow no fi ase wɔ wrapper element bi so.
• Sɛ wofi ase fi hyperlink ahorow a ɛtrɛw nkyerɛwde ahorow pii mu a, adwinnade ho nsɛm bɛkɔ mfinimfini. Fa di dwuma white-space: nowrap;wɔ wo <a>s so na woakwati saa suban yi.
• Ɛsɛ sɛ wɔde nnwinnadeɛ ho nsɛm sie ansa na wɔayi wɔn nneɛma a ɛne no hyia no afiri DOM no mu.
• Tooltips betumi ayɛ triggered aseda element bi a ɛwɔ sunsuma DOM mu.

Woanya saa nneɛma no nyinaa? Ɔkɛseɛ, ma yɛnhwɛ sɛdeɛ wɔde nhwɛsoɔ bi yɛ adwuma.

Nhwɛso ahorow

Ma nnwinnade ho nyansahyɛ ahorow nyɛ adwuma

Sɛnea yɛaka wɔ atifi hɔ no, ɛsɛ sɛ wohyɛ adwinnade ho nsɛm ase ansa na woatumi de adi dwuma. Ɔkwan baako a wobɛfa so ahyɛ adwinnadeɛ a ɛwɔ kratafa bi so nyinaa ase ne sɛ wobɛpaw wɔn denam wɔn data-bs-togglesu so, te sɛ saa:

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

Nnwinnade ho afotu a ɛwɔ link ahorow so

Fa wo nsa hyɛ link ahorow a ɛwɔ ase ha no so na wubehu nnwinnade ho nyansahyɛ ahorow:

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

Nnwinnade ho nyansahyɛ ahorow a wɔahyɛ da ayɛ

Wubetumi de CSS variables ayɛ adwinnade ho nsɛm a ɛbɛda adi no ho nhyehyɛe . Yɛde custom class bi si hɔ de data-bs-custom-class="custom-tooltip"to scope yɛn custom appearance na yɛde di dwuma de override local CSS variable bi so.

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

Akwankyerɛ ahorow

Fa wo nsa hyɛ bɔtn a ɛwɔ ase hɔ no so na wubehu adwinnade ho akwankyerɛ anan no: soro, nifa, ase, ne benkum. Akwankyerɛ ahorow no yɛ ahwehwɛ bere a wode Bootstrap redi dwuma wɔ RTL mu no.

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

Na ɛne HTML a wɔahyɛ da ayɛ a wɔde aka ho no:

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

Sɛ wode SVG di dwuma a:

CSS a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren nnwinnade ho nkyerɛkyerɛmu de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .tooltipma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no ​​da so ara boa, nso.

  --#{$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 nsakrae ahorow

$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

Sɛnea wɔde di dwuma

Adwinnade ho nkyerɛkyerɛmu plugin no yɛ nsɛm ne agyiraehyɛde wɔ ahwehwɛde so, na sɛnea ɛte no, ɛde adwinnade ho nsɛm si wɔn trigger element no akyi.

Fa JavaScript so na ɛkanyan adwinnade no:

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 a wɔde hyɛ agyirae

Agyiraehyɛde a wɔhwehwɛ ma adwinnade ho nkyerɛkyerɛmu no yɛ datasu bi nkutoo na titlewɔ HTML element no so no wopɛ sɛ wunya adwinnade ho nsɛm. Nnwinnade bi agyiraehyɛde a wɔayɛ no yɛ mmerɛw mmom, ɛwom sɛ ɛhwehwɛ gyinabea (default no, wɔde ahyɛ mu topdenam plugin no so).

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

Nneɛma a wɔadi dɛm

Elements a ɛwɔ disabledattribute no nyɛ nkitahodi, a ɛkyerɛ sɛ wɔn a wɔde di dwuma no ntumi mfa wɔn adwene nsi wɔn so, wɔmfa wɔn ho nhyɛ mu, anaasɛ wɔmfa wɔn nsa nka wɔn mfa nhyɛ adwinnade ho nsɛm (anaasɛ popover) ase. Sɛ́ ɔkwan a wobɛfa so ayɛ adwuma no, wobɛpɛ sɛ wokanyan adwinnade no asɛm no fi wrapper <div>anaa <span>, a eye sen biara a wɔayɛ no keyboard-focusable denam 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>

Nneɛma a wubetumi apaw

Sɛnea wobetumi afa data attributes anaa JavaScript so de options no atwam no, wubetumi de option din ahyɛ data-bs-, sɛnea ɛwɔ data-bs-animation="{value}". Hwɛ hu sɛ wobɛsesa case type a ɛwɔ option din no mu afi “ camelCase ” akɔ “ kebab-case ” bere a wode options no nam data attributes so retwam no. Sɛ nhwɛso no, fa di dwuma data-bs-custom-class="beautifier"mmom sen sɛ wode data-bs-customClass="beautifier".

Ɛde besi Bootstrap 5.2.0 no, nneɛma no nyinaa boa nhwehwɛmu a wɔde asie data su data-bs-configa ebetumi de afã nhyehyɛe a ɛnyɛ den ahyɛ mu sɛ JSON ahama. Sɛ element bi wɔ data-bs-config='{"delay":0, "title":123}'ne data-bs-title="456"su ahorow a, botae a etwa to titleno bɛyɛ 456na data su ahorow a ɛtetew mu no bɛbɔ botae ahorow a wɔde ama wɔ data-bs-config. Bio nso, data su ahorow a ɛwɔ hɔ dedaw no tumi de JSON botae ahorow te sɛ data-bs-delay='{"show":0,"hide":150}'.

Dwumadi a wɔde di dwuma nepopperConfig

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

Akwan a wɔfa so yɛ

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

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

Nsɛm a esisi

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

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

tooltip.hide()