Hmanraw hman dan tur

A tlangpuiin

Tooltip plugin hman huna hriat tur awmte:

• Tooltips hian positioning atan 3rd party library Popper a ring tlat a ni. Tooltips a thawh theih nan bootstrap.js hmain popper.min.js i dah hmasa tur a ni emaw, Popper awmna bootstrap.bundle.min.js/ hmang tur a ni!bootstrap.bundle.js
• Tooltips hi performance avanga opt-in a nih avangin nangmah ngeiin i initialize tur a ni .
• Zero-length title nei tooltip 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.

Entirnan: Hmun tinah tooltips enable rawh

Page pakhata tooltip zawng zawng initialize dan pakhat chu an data-bs-toggleattribute hmanga thlan hi a ni ang:

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

Entirna te

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

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

Tin, custom HTML a dah belh bawk a:

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

SVG hmangin:

Sass a ni

Variables te pawh a awm

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

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:

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 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 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" 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 elements te disabledhi interactive an ni lo va, chu chu users 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" 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 hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-bs-, data-bs-animation="". Data attribute hmanga options pass dawnin option hming case type chu camelCase atanga kebab-case ah thlak ngei ngei tur a ni. Entirnan, , hmang data-bs-customClass="beautifier"lovin data-bs-custom-class="beautifier".

Function hman dan nenpopperConfig

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

Thiltih dan tur

lantir

Element pakhat tooltip a pholang. Tooltip a lan tak tak hmain (chu chu shown.bs.tooltipevent a thlen hmain) caller hnenah a kir leh thin. Hei hi tooltip “manual” triggering anga ngaih a ni. Zero-length title nei tootip te hi a lang ngai lo.

tooltip.show()

biru

Element pakhat tooltip a thup thin. Tooltip a thup tak tak hmain (chu chu hidden.bs.tooltipevent a thlen hmain) caller hnenah a kir leh thin. Hei hi tooltip “manual” triggering anga ngaih a ni.

tooltip.hide()

toggle a ni

Element pakhat tooltip a toggle thin. Tooltip a lan tak tak emaw a thup hma emaw (chu chu shown.bs.tooltipor hidden.bs.tooltipevent a thlen hma) caller hnenah a kir leh thin. Hei hi tooltip “manual” triggering anga ngaih a ni.

tooltip.toggle()

paih chhuak rawh

Element pakhat tooltip a thup a, a tichhia (DOM element a data dahkhawmte a paih chhuak thin). Delegation hmanga siam Tooltips ( option hmanga siamselector ) te chu descendant trigger elements ah pakhat zel tihchhiat theih a ni lo.

tooltip.dispose()

theih tir

Element pakhat tooltip chu a lantir theihna a pe. Tooltips hi default-in a enable a ni.

tooltip.enable()

ramtuileilo

Element pakhat tooltip a lan theihna tur a paih chhuak. Tooltip hi re-enable a nih chauhvin a lang thei ang.

tooltip.disable()

toggleEnabled a ni

Element pakhat tooltip tarlan emaw thup emaw theihna tur a toggle thin.

tooltip.toggleEnabled()

tharlam

Element pakhat tooltip awmna hmun a update thin.

tooltip.update()

GetInstance tih a ni

Static method hmanga DOM element nena inzawm tooltip instance hmuh theihna tur

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

GetOrCreateInstance tih theih a ni

Static method hmangin DOM element nena inzawm tooltip instance chu i hmu thei a, a nih loh leh initialised a nih loh chuan a thar siam theih a ni bawk

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

Thil thlengte

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

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

tooltip.hide()