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 3rd party nhomakorabea Popper so ma gyinabea. Ɛsɛ sɛ wode popper.min.js ka ho ansa na bootstrap.js anaa wode bootstrap.bundle.min.js/ bootstrap.bundle.jsa Popper wom di dwuma na ama adwinnade ho nsɛm atumi ayɛ adwuma!
• 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: Ma adwinnade ho nsɛm nyɛ adwuma wɔ baabiara

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Nhwɛso ahorow

Fa wo nsa hyɛ link ahorow a ɛwɔ ase ha no so na wubehu nnwinnade ho nyansahyɛ 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" 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>

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" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Sɛ wode SVG di dwuma a:

Sass

Nneɛma a Ɛsakra

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

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:

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  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" 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" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-, sɛnea ɛwɔ data-bs-animation="". Hwɛ 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, sɛ́ anka wode bedi dwuma data-bs-customClass="beautifier"no, fa data-bs-custom-class="beautifier".

Dwumadi a wɔde di dwuma nepopperConfig

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

Akwan a wɔfa so yɛ

da no adi

Ɛda element bi adwinnade ho nsɛm adi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada adwinnade no adi ankasa (kyerɛ sɛ ansa na shown.bs.tooltipasɛm no asi). Wobu eyi sɛ “nsaano” a wɔde kanyan adwinnade no ho asɛm. Nnwinnade ho nsɛm a ɛwɔ asɛmti a ne tenten yɛ zero no nkyerɛ da.

tooltip.show()

tɛ

Fa element bi adwinnade ho nsɛm sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde adwinnade no asie ankasa (kyerɛ sɛ ansa na hidden.bs.tooltipasɛm no asi). Wobu eyi sɛ “nsaano” a wɔde kanyan adwinnade no ho asɛm.

tooltip.hide()

toggle no

Toggles element bi adwinnade ho nsɛm. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ adwinnade no asɛm no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.tooltipanaa hidden.bs.tooltipadeyɛ no aba). Wobu eyi sɛ “nsaano” a wɔde kanyan adwinnade no ho asɛm.

tooltip.toggle()

tow gu

Hide na ɛsɛe element bi adwinnade tip (Eyi data a wɔde asie wɔ DOM element no so). Nnwinnade a wɔde delegation di dwuma (a wɔde option ) na ɛyɛe noselector ntumi nsɛe no ankorankoro wɔ descendant trigger elements so.

tooltip.dispose()

ma kwan

Ɛma element bi tooltip tumi a wɔde bɛkyerɛ. Nnwinnade ho nsɛm no yɛ nea wɔahyɛ da ayɛ.

tooltip.enable()

sɛe

Yi tumi a ɛwɔ element bi adwinnade a wɔde bɛkyerɛ no fi hɔ. Sɛ wɔsan yɛ adwuma nkutoo a, wobetumi akyerɛ adwinnade no.

tooltip.disable()

toggleWɔama ayɛ adwuma

Toggles tumi a element bi adwinnade tip bɛkyerɛ anaa wɔde asie.

tooltip.toggleEnabled()

sakra mu

Ɔyɛ element bi adwinnade tip no gyinabea foforo.

tooltip.update()

nyaNhwɛsode

Static kwan a ɛma wo kwan ma wo nya tooltip instance a ɛbata DOM element bi ho

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

nyaAnaasɛKyɛNhwɛso

Static kwan a ɛma wo kwan ma wo nya tooltip instance a ɛbata DOM element bi ho, anaasɛ wobɔ foforo sɛ ɛba sɛ wɔanhyɛ aseɛ a

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Nsɛm a esisi

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()