Source

Hmanraw hman dan tur

Documentation leh entirnan CSS leh JavaScript hmanga custom Bootstrap tooltips dah belh dan tur CSS3 hmanga animation leh local title storage atana data-attribute te dah belh dan tur.

A tlangpuiin

Tooltip plugin hman huna hriat tur awmte:

  • Tooltips hian positioning atan 3rd party library Popper.js a ring tlat a ni. Tooltips a thawh theih nan bootstrap.js hmain popper.min.js i dah hmasa tur a ni emaw, Popper.js awmna bootstrap.bundle.min.js/ i hmang bootstrap.bundle.jstur a ni!
  • Kan JavaScript hi source atanga i siam a nih chuanutil.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.

He component hian animation effect hi prefers-reduced-motionmedia query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la .

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-toggleattribute hmanga thlan hi a ni ang:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Entirna te

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

Tight pants next level keffiyeh i la hre lo ngei ang. Thlalak booth hmul raw denim letterpress vegan palai bag stumptown. Farm-to-table seitan, mcsweeney-a fixie sustainable quinoa 8-bit american apparel te chuan terry richardson vinyl chambray an nei a, an thil siam chu an hlim hle. Beard stumptown, cardigans banh mi lomo zing khawvar. Tofu biodiesel williamsburg marfa, pali loko mcsweeney chuan vegan chambray a tifai a. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral a ni.

A hnuaia button-te chungah hian hover la, tooltips direction pali: chunglam, dinglam, hnuai lam, leh veilam te chu i hmu ang.

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

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:

$('#example').tooltip(options)
Overflow autolehscroll

Tooltip position hian parent container-in kan , a neih overflow: autoemaw, a duh emaw hunah automatic-in a thlak tum a , mahse original placement-a positioning chu a la vawng reng tho. Resolve tur chuan option chu default value, , tih loh thil dangah set la , chu chu :overflow: scroll.table-responsiveboundary'scrollParent''window'

$('#example').tooltip({ boundary: 'window' })

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.

Keyboard leh assistive technology hmangtute tana hmanraw tangkai tak siam

HTML elements hmanlai keyboard-focusable leh interactive (link emaw form control ang chi)-ah chauh tooltips i dah tur a ni. Attribute dah belh hian arbitrary HTML elements ( <span>s ang chi) chu focusable-a siam theih ni mah se tabindex="0", hei hian keyboard hmangtute tan non-interactive element-a tab stop tibuaitu leh buaithlak tak tak a belhchhah ang. Tin, tun dinhmunah chuan assistive technology tam zawk chuan hetiang dinhmunah hian tooltip hi an puang lo.

hoverTin, i tooltip atana trigger atan chauh rinchhan suh , hei hian keyboard hmangtute tan i tooltip te chu trigger theih loh a siam dawn a ni.

<!-- HTML to write -->
<a href="#" data-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="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 <div>emaw <span>, a tha ber chu keyboard-focusable hmanga siam atanga trigger i duh ang a, on the disabled element chu tabindex="0"override i duh ang.pointer-events

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" 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-, data-animation="".

Hming Lampang Hlawhchhamna Hrilhfiahna
animation tih a ni boolean a ni dik Tooltip ah CSS fade transition hmangin apply rawh
container a ni string | element | diklo diklo

Tooltip chu element bik pakhatah a append thin. Entirnan: container: 'body'. He option hi a bik takin a tangkai hle a, triggering element bulah document flow-ah tooltip chu dah theih a ni - chu chuan window resize laiin tooltip chu triggering element atanga hla takah a float loh nan a veng ang.
titlai number | thil 0 a ni

Tooltip (ms) entir leh thup hun sawn hlat - manual trigger type-ah chuan a hman theih loh

Number supply a nih chuan hide/show pahnih ah delay a awm vek a ni

Thil awm dan tur chu:delay: { "show": 500, "hide": 100 }
html tih a ni boolean a ni diklo

Tooltip ah HTML phalsak rawh.

A dik a nih chuan tooltip's a HTML tags te chu tooltip titleah a render ang. False a nih chuan jQuery-a textmethod hmangin DOM-ah content dah a ni ang.

XSS attack i ngaihtuah chuan text hmang rawh.
dahna tur hmun a ni string | thiltih 'chung'

Tooltip dah dan tur - auto | chunglam | hnuai lam | veilam | dik.
A autotarlan hunah chuan tooltip chu dynamically in a reorient ang.

Function pakhat chu placement hriat nan hman a nih chuan tooltip DOM node chu a argument hmasa ber atan leh triggering element DOM node chu a pahnihna atan hmangin koh a ni. Context chu thistooltip instance ah dah a ni.
selector a ni string | diklo diklo Selector pek a nih chuan tooltip objects chu target tarlan te hnenah delegate a ni ang. jQuery.onPractice-ah chuan hei hi dynamically added DOM elements ( support)-a tooltips hmanna atan pawh hman a ni. Hei hi leh entîrna thu hriat theihna en rawh .
template a ni hrui '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Tooltip siam huna hman tur HTML base rawh.

Tooltip's titlechu a inject ang a, .tooltip-inner.

.arrowtooltip-a arrow a lo ni ta a ni.

Wrapper element pawn lam ber chuan .tooltipclass leh role="tooltip".
nihna string | element | thiltih '' tih a ni.

titleAttribute a awm loh chuan title value default a ni.

Function pek a nih chuan a thisreference set tooltip attached element-ah a ko ang.
ti per hrui 'hover focus' tih a ni.

Tooltip a trigger dan - | tih kha click la hover rawh | focus | kuta thawh. Trigger tam tak i pass thei a; space hmangin then hran rawh.

'manual'tooltip chu programmatic-in .tooltip('show'), .tooltip('hide')leh .tooltip('toggle')methods hmangin a trigger dawn tih a tarlang a; he value hi trigger dang nen a inzawm thei lo.

'hover'a mah chauhin keyboard hmanga trigger theih loh tooltips a siam ang a, keyboard hmangtute tana thu inang thehdarh dan dang a awm chauhvin hman tur a ni.
offset a ni number | hrui 0 a ni Tooltip chu a target nena khaikhin chuan offset a ni. Hriat belh duh chuan Popper.js-a offset docs en rawh.
fallbackPlacement tih a ni string | array a ni 'vai' Fallback-ah Popper hian eng position nge a hman dawn tih tarlan phalsak rawh. Hriat belh duh chuan Popper.js-a behavior docs en rawh
ramri a ni string | thil bul 'scrollParent' tih a ni. Tooltip-a overflow constraint ramri a awm. 'viewport', 'window', 'scrollParent', emaw HTMLElement reference (JavaScript chauh) value te a pawm . Hriat belh duh chuan Popper.js-a preventOverflow docs en rawh.

Tooltip hrang hrang atana data attribute te

Tooltip hrang hrang atana option hrang hrangte chu a dangin data attribute hmanga tarlan theih a ni a, a chunga kan sawi tawh ang khan.

Thiltih dan tur

Asynchronous method leh inthlak danglamna te

API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .

Hriat belh duh chuan kan JavaScript documentation en rawh .

$().tooltip(options)

Element collection pakhatah tooltip handler a attache thin.

.tooltip('show')

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.

$('#element').tooltip('show')

.tooltip('hide')

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.

$('#element').tooltip('hide')

.tooltip('toggle')

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.

$('#element').tooltip('toggle')

.tooltip('dispose')

Element pakhat tooltip a thup a, a tichhia bawk. Delegation hmanga siam Tooltips ( option hmanga siamselector ) te chu descendant trigger elements ah pakhat zel tihchhiat theih a ni lo.

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Element pakhat tooltip awmna hmun a update thin.

$('#element').tooltip('update')

Thil thlengte

Thil thleng chi hrang hrang Hrilhfiahna
show.bs.a hmanrua te chu entir rawh showHe event hi instance method kan koh chuan a fire nghal vek a ni.
tih a ni.bs.tooltip He event hi tooltip chu user-te hmuh theiha siam a nih hunah a fire a ni (CSS transition zawh hun a nghak ang).
hide.bs.a hman dan tur hideHe event hi instance method koh a nih chuan a fire nghal a ni.
thup.bs.thil hman dan tur He event hi tooltip chu user hnen atanga thup a nih zawh chuan a fire thin (CSS transitions zawh hun a nghak ang).
a rawn dah lut.bs.tooltip show.bs.tooltipHe event hi DOM-a tooltip template dah a nih hunah event zawhah fire a ni. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})