Hmanraw hman dan tur

A tlangpuiin

Tooltip plugin hman huna hriat tur awmte:

• Tooltips hian positioning atan third party library Popper a ring tlat a ni. , hmain popper.min.js i dah tel tur a ni a , a nih loh leh Popper awmna bootstrap.jshmang tur a ni.bootstrap.bundle.min.js
• Tooltips hi performance avanga opt-in a nih avangin nangmah ngeiin i initialize tur a ni .
• Zero-length title nei tootip te hi a lang ngai lo.
• container: 'body'Component complex zawk (kan input group, button group, etc)-a rendering problem awm loh nan specify rawh .
• Hidden elements-a tooltips trigger hian hna a thawk dawn lo.
• Tooltips for .disabledor disabledelements te chu wrapper element ah trigger tur a ni.
• Line tam tak huam chhunga hyperlink atanga trigger a nih chuan tooltips te chu centered a ni ang. Hetiang thiltih hi pumpelh nan white-space: nowrap;i s hmangin hmang rawh .<a>
• Tooltips te hi DOM atanga an element inmil te an paih hmain thup hmasak phawt a ngai a ni.
• Shadow DOM chhunga element awm avangin tootips hi a trigger thei a ni.

Chutiang zawng zawng chu i nei em? A ropui hle mai, entirnan thenkhat nen an hnathawh dan i en ang u.

Entirna te

Tooltips te chu enable rawh

A chunga kan sawi tawh ang khan tooltips te hi i hman theih hmain i initialize hmasa phawt tur a ni. Page pakhata tooltip zawng zawng initialize dan pakhat chu an data-bs-toggleattribute hmanga thlan chhuah a ni ang, hetiang hian:

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

Link hrang hranga hmanraw hman dan tur

A hnuaia link te hi hover la, tooltips i hmu ang:

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

Custom tooltips te pawh a awm bawk

CSS variable hmangin tooltips awm dan tur i siam danglam thei bawk . Kan custom appearance scope turin custom class kan set a data-bs-custom-class="custom-tooltip", local CSS variable override nan kan hmang bawk.

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

Kawng zawh dan tur

A hnuaia button-te chungah hian hover la, tooltips direction pali: chunglam, dinglam, hnuai lam, leh veilam te chu i hmu ang. RTL a Bootstrap hman hian directions a mirror thin.

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

Tin, custom HTML a dah belh bawk a:

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

SVG hmangin:

CSS a ni

Variables te pawh a awm

Bootstrap-in CSS variables approach a kalpui mek zingah hian tunah chuan tooltipps hian local CSS variables on hmangin .tooltipreal-time customization tihchangtlun nan an hmang ta a ni. CSS variable hrang hrangte tana value te hi Sass hmanga set a nih avangin Sass customization pawh a la support reng bawk.

  --#{$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 a danglam thei

$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

Hman dan tur

Tooltip plugin hian content leh markup on demand a siam a, default-in tooltip te chu an trigger element hnuaiah a dah thin.

JavaScript hmangin tooltip chu trigger la:

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 ni

Tooltip atana markup mamawh chu dataattribute chauh a ni a title, HTML element-ah chuan tooltip neih i duh a ni. Tooltip pakhata markup siam chhuah chu a awlsam deuh a, mahse position (by default-ah topchuan plugin-in a set) a ngai a ni.

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

Elements tihtawp a ni

Attribute nei element te disabledhi interactive an ni lo a, chu chu user te chuan tooltip (or popover) trigger turin an focus thei lo va, an hover thei lo va, an click thei lo tihna a ni. Workaround atan chuan tooltip chu wrapper atanga trigger <div>emaw <span>, ideally made keyboard-focusable using 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>

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmanga pass theih a nih avangin option hming chu data-bs-, ah hian i append thei ang data-bs-animation="{value}". Data attribute hmanga options pass dawnin option hming case type chu “ camelCase ” atanga “ kebab-case ” ah thlak ngei ngei tur a ni. Entirnan, data-bs-custom-class="beautifier"tih aiah hmang data-bs-customClass="beautifier"rawh.

Bootstrap 5.2.0 atang khan component zawng zawng hian experimental reserved data attribute an support data-bs-configa, chu chuan JSON string angin component configuration awlsam tak a dah thei a ni. Element pakhatin data-bs-config='{"delay":0, "title":123}'leh data-bs-title="456"attribute a neih chuan a tawp ber titlevalue chu a ni ang a 456, data attribute hrang hrangte chuan , a value pekte chu a override ang data-bs-config. Chu bakah, data attribute awmsa te hian JSON value te chu data-bs-delay='{"show":0,"hide":150}'.

Function hman dan nenpopperConfig

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

Thiltih dan tur

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

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

Thil thlengte

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

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

tooltip.hide()