Source

Tooltips

Dokumintaasje en foarbylden foar it tafoegjen fan oanpaste Bootstrap-arktips mei CSS en JavaScript mei CSS3 foar animaasjes en data-attributen foar lokale titelopslach.

Oersicht

Dingen om te witten by it brûken fan de tooltip-plugin:

  • Tooltips fertrouwe op de 3rd party bibleteek Popper.js foar posisjonearring. Jo moatte popper.min.js opnimme foardat bootstrap.js of brûke bootstrap.bundle.min.js/ bootstrap.bundle.jsdy't Popper.js befettet om tooltips te wurkjen!
  • As jo ​​​​ús JavaScript bouwe fanút boarne, fereasketutil.js it .
  • Tooltips binne opt-in foar prestaasjesredenen, dus jo moatte se sels inisjalisearje .
  • Tooltips mei titels fan nul lingte wurde nea werjûn.
  • Spesifisearje container: 'body'om it werjaan fan problemen yn kompleksere komponinten te foarkommen (lykas ús ynfiergroepen, knopgroepen, ensfh.).
  • It triggerjen fan tooltips op ferburgen eleminten sil net wurkje.
  • Tooltips foar .disabledof disabledeleminten moatte wurde aktivearre op in wrapper elemint.
  • Wannear't aktivearre wurdt fan hyperlinks dy't meardere rigels oerspant, sille tooltips sintraal wurde. Brûk white-space: nowrap;op jo <a>s om dit gedrach te foarkommen.
  • Tooltips moatte ferburgen wurde foardat de oerienkommende eleminten fan 'e DOM fuortsmiten binne.

Hast dat alles? Geweldich, lit ús sjen hoe't se wurkje mei guon foarbylden.

Foarbyld: Aktivearje tooltips oeral

Ien manier om alle tooltips op in side te inisjalisearjen soe wêze om se te selektearjen troch har data-toggleattribút:

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

Foarbylden

Hoverje oer de keppelings hjirûnder om tooltips te sjen:

Strakke broek folgjende nivo keffiyeh jo hawwe wierskynlik net heard fan harren. Photo booth baard rau denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duorsume quinoa 8-bit Amerikaanske klean hawwe in terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fjouwer loko mcsweeney's reinigje vegan chambray. In echt iroanysk ambachtsman wat keytar , scenester farm-to-table banksy Austin twitter handle freegan cred rauwe denim single-origin kofje virale.

Hoverje oer de knoppen hjirûnder om de fjouwer tooltips-rjochtings te sjen: boppe, rjochts, ûnder en lofts.

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

En mei oanpast HTML tafoege:

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

Gebrûk

De tooltip-plugin genereart ynhâld en markearring op fraach, en pleatst standert tooltips nei har trigger-elemint.

Trigger de tooltip fia JavaScript:

$('#example').tooltip(options)
Oerfloed autoenscroll

Tooltip-posysje besiket automatysk te feroarjen as in âlderkontener ús hat overflow: autoof overflow: scrollliket .table-responsive, mar hâldt de posysje fan 'e orizjinele pleatsing noch altyd. Om op te lossen, set de boundaryopsje op wat oars dan standertwearde, 'scrollParent', lykas 'window':

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

Markup

De fereaske markup foar in tooltip is allinich in dataattribút en titleop it HTML-elemint wolle jo in tooltip hawwe. De generearre markup fan in tooltip is frij ienfâldich, hoewol it in posysje fereasket (standert, ynsteld toptroch de plugin).

Tooltips meitsje foar brûkers fan toetseboerd en assistinte technology

Jo moatte allinich tooltips tafoegje oan HTML-eleminten dy't tradisjoneel toetseboerdfokusber en ynteraktyf binne (lykas keppelings of formulierkontrôles). Hoewol't willekeurige HTML-eleminten (lykas <span>s) fokusber makke wurde kinne troch it tafoegjen fan it tabindex="0"attribút, sil dit potinsjeel ferfelende en betiizjende ljepperstops tafoegje op net-ynteraktive eleminten foar toetseboerdbrûkers. Derneist kundigje de measte assistive technologyen op it stuit de tooltip yn dizze situaasje net oan.

Fertrou net allinich op hoveras de trigger foar jo tooltip, om't dit jo tooltips ûnmooglik meitsje sil foar toetseboerdbrûkers.

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

Utskeakele eleminten

Eleminten mei it disabledattribút binne net ynteraktyf, wat betsjut dat brûkers net kinne fokusje, hoverje of klikke om in tooltip (of popover) te triggerjen. As oplossing wolle jo de tooltip út in wrapper <div>of <span>, ideaal makke toetseboerd-fokusber makke mei tabindex="0", en oerskriuwe it pointer-eventsop it útskeakele elemint.

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-animation="".

Namme Type Standert Beskriuwing
animaasje boolean wier Tapasse in CSS-fade-oergong op de tooltip
kontener string | elemint | falsk falsk

Foegje de tooltip ta oan in spesifyk elemint. Foarbyld container: 'body':. Dizze opsje is benammen nuttich om't jo de tooltip yn 'e stream fan it dokumint kinne pleatse yn' e buert fan it aktivearjende elemint - wat sil foarkomme dat de tooltip fuortsweefd wurdt fan it triggerelemint by in finstergrutte feroarje.
fertraging nûmer | objekt 0

Fertrage it sjen en ferbergjen fan de tooltip (ms) - jildt net foar manuele triggertype

As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show

Objektstruktuer is:delay: { "show": 500, "hide": 100 }
html boolean falsk

Tastean HTML yn de tooltip.

As wier, wurde HTML-tags yn 'e tooltip titlewerjûn yn' e tooltip. As it falsk is, textsil de metoade fan jQuery brûkt wurde om ynhâld yn 'e DOM yn te foegjen.

Brûk tekst as jo soargen meitsje oer XSS-oanfallen.
pleatsing string | funksje 'top'

Hoe kinne jo de tooltip pleatse - auto | top | ûnderen | lofts | rjochts.
Wannear autois oantsjutte, sil it de tooltip dynamysk reorientearje.

As in funksje brûkt wurdt om de pleatsing te bepalen, wurdt it neamd mei de tooltip DOM-knooppunt as syn earste argumint en it triggerelemint DOM-knooppunt as syn twadde. De thiskontekst is ynsteld op de tooltip-eksimplaar.
selector string | falsk falsk As in selector wurdt foarsjoen, sil tooltip objekten wurde delegearre oan de oantsjutte doelen. Yn 'e praktyk wurdt dit brûkt om dynamyske HTML-ynhâld yn te skeakeljen om popovers tafoege te hawwen. Sjoch dit en in ynformatyf foarbyld .
sjabloan string '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Basis HTML om te brûken by it meitsjen fan de tooltip.

De tooltip's titlesille yn 'e .tooltip-inner.

.arrowsil de pylk fan de tooltip wurde.

De bûtenste wrapper elemint moat hawwe de .tooltipklasse en role="tooltip".
titel string | elemint | funksje ''

Standert titelwearde as titleattribút net oanwêzich is.

As in funksje wurdt jûn, wurdt it neamd mei syn thisferwizing set nei it elemint dat de tooltip is hechte oan.
trekker string 'fokus fokus'

Hoe tooltip wurdt aktivearre - klik | sweef | fokus | hantlieding. Jo kinne meardere triggers trochjaan; skiede se mei in romte.

'manual'jout oan dat de tooltip programmatysk ynskeakele wurdt fia de metoaden .tooltip('show'), .tooltip('hide')en ; .tooltip('toggle')dizze wearde kin net kombinearre wurde mei in oare trigger.

'hover'op har eigen sil resultearje yn tooltips dy't net kinne wurde aktivearre fia it toetseboerd, en moatte allinnich brûkt wurde as alternative metoaden foar it oerbringen fan deselde ynformaasje foar toetseboerd brûkers is oanwêzich.
offset nûmer | string 0 Offset fan de tooltip relatyf oan syn doel. Foar mear ynformaasje ferwize nei de offsetdokuminten fan Popper.js .
fallbackPlacement string | array 'flip' Tastean om oan te jaan hokker posysje Popper sil brûke by fallback. Foar mear ynformaasje ferwize nei Popper.js's gedrachsdokuminten
skieding string | elemint 'scrollParent' Overflow beheining grins fan de tooltip. Akseptearret de wearden fan 'viewport', 'window', 'scrollParent', of in HTMLElement-referinsje (allinich JavaScript). Foar mear ynformaasje ferwize nei Popper.js's preventOverflow-dokuminten .

Data attributen foar yndividuele tooltips

Opsjes foar yndividuele tooltips kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen, lykas hjirboppe útlein.

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje.

$().tooltip(options)

Hechtet in tooltip handler oan in elemint kolleksje.

.tooltip('show')

Iepenet de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip wirklik werjûn is (dus foardat it shown.bs.tooltipbarren bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip. Tooltips mei titels fan nul lingte wurde nea werjûn.

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

.tooltip('hide')

Ferberget de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip eins ferburgen is (dus foardat it hidden.bs.tooltipbarren bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip.

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

.tooltip('toggle')

Skeakelt de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip wirklik werjûn of ferburgen is (dus foardat it barren shown.bs.tooltipof hidden.bs.tooltipbart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip.

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

.tooltip('dispose')

Ferberget en ferneatiget de tooltip fan in elemint. Tooltips dy't delegaasje brûke (dy't makke binne mei de selectoropsje ) kinne net yndividueel ferneatige wurde op ôfstammende trigger-eleminten.

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

.tooltip('enable')

Jout de tooltip fan in elemint de mooglikheid om te sjen. Tooltips binne standert ynskeakele.

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

.tooltip('disable')

Ferwidert de mooglikheid om de tooltip fan in elemint te sjen. De tooltip sil allinich te sjen wêze kinne as it opnij ynskeakele is.

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

.tooltip('toggleEnabled')

Wizigje de mooglikheid om de tooltip fan in elemint te sjen of te ferbergjen.

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

.tooltip('update')

Updatet de posysje fan de tooltip fan in elemint.

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

Eveneminten

Event Type Beskriuwing
show.bs.tooltip Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
shown.bs.tooltip Dit evenemint wurdt ûntslein as de tooltip sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
hide.bs.tooltip Dit barren wurdt fuortendaliks ûntslein as de hideeksimplaarmetoade oanroppen is.
hidden.bs.tooltip Dit evenemint wurdt ûntslein as de tooltip klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
ynfoege.bs.tooltip Dit evenemint wurdt ûntslein nei it show.bs.tooltipbarren as de tooltip-sjabloan is tafoege oan de DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})