in English

Gereedskapwenke

Dokumentasie en voorbeelde vir die byvoeging van pasgemaakte Bootstrap-nutsmiddelwenke met CSS en JavaScript met behulp van CSS3 vir animasies en data-kenmerke vir plaaslike titelberging.

Oorsig

Dinge om te weet wanneer jy die tooltip-inprop gebruik:

  • Gereedskapwenke maak staat op die derdeparty-biblioteek Popper vir posisionering. Jy moet popper.min.js voor bootstrap.js insluit of bootstrap.bundle.min.js/ bootstrap.bundle.jswat Popper bevat gebruik sodat gereedskapwenke kan werk!
  • As jy ons JavaScript vanaf die bron bou, vereisutil.js dit .
  • Gereedskapwenke is intekening vir prestasieredes, so jy moet dit self inisialiseer .
  • Gereedskapwenke met titels van geen lengte word nooit vertoon nie.
  • Spesifiseer container: 'body'om te verhoed dat probleme in meer komplekse komponente weergegee word (soos ons invoergroepe, knoppiegroepe, ens.).
  • Om gereedskapwenke op verborge elemente te aktiveer, sal nie werk nie.
  • Gereedskapwenke vir .disabledof disabledelemente moet op 'n omhulelement geaktiveer word.
  • Wanneer dit geaktiveer word vanaf hiperskakels wat oor verskeie lyne strek, sal gereedskapwenke gesentreer word. Gebruik white-space: nowrap;op jou <a>s om hierdie gedrag te vermy.
  • Gereedskapwenke moet versteek word voordat hul ooreenstemmende elemente uit die DOM verwyder is.
  • Gereedskapwenke kan geaktiveer word danksy 'n element binne 'n skadu-DOM.
By verstek gebruik hierdie komponent die ingeboude inhoudreiniger, wat enige HTML-elemente wat nie eksplisiet toegelaat word nie, verwyder. Sien die ontsmettingsmiddel-afdeling in ons JavaScript-dokumentasie vir meer besonderhede.
Die animasie-effek van hierdie komponent is afhanklik van die prefers-reduced-motionmedianavraag. Sien die verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .

Het jy dit alles? Wonderlik, kom ons kyk hoe hulle werk met 'n paar voorbeelde.

Voorbeeld: Aktiveer gereedskapwenke oral

Een manier om alle gereedskapwenke op 'n bladsy te inisialiseer, is om hulle volgens hul data-togglekenmerk te kies:

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

Voorbeelde

Beweeg oor die skakels hieronder om nutswenke te sien:

Plekhouerteks om 'n paar inlynskakels met nutswenke te demonstreer. Hierdie is nou net vuller, geen moordenaar nie. Inhoud wat hier geplaas word net om die teenwoordigheid van regte teks na te boots . En dit alles net om jou 'n idee te gee van hoe gereedskapwenke sal lyk wanneer dit in werklike situasies gebruik word. So hopelik het jy nou gesien hoe hierdie nutswenke oor skakels in die praktyk kan werk, sodra jy dit op jou eie webwerf of projek gebruik.

Beweeg oor die knoppies hieronder om die vier gereedskapwenke-rigtings te sien: bo, regs, onder en links.

<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 met persoonlike HTML bygevoeg:

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

Gebruik

Die tooltip-inprop genereer inhoud en opmaak op aanvraag, en plaas by verstek gereedskapwenke na hul snellerelement.

Aktiveer die nutswenk via JavaScript:

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

Nutswenk-posisie poog om outomaties te verander wanneer 'n ouerhouer ons het overflow: autoof overflow: scrollhou van ons .table-responsive, maar behou steeds die oorspronklike plasing se posisionering. Om op te los, stel die boundaryopsie op enigiets anders as verstekwaarde, 'scrollParent', soos 'window':

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

Opmerk

Die vereiste opmaak vir 'n nutswenk is slegs 'n datakenmerk en titleop die HTML-element wil jy 'n nutswenk hê. Die gegenereerde opmaak van 'n nutswenk is redelik eenvoudig, alhoewel dit 'n posisie vereis (by verstek gestel topdeur die inprop).

Maak gereedskapwenke werk vir sleutelbord- en hulptegnologiegebruikers

Jy moet slegs gereedskapwenke by HTML-elemente voeg wat tradisioneel sleutelbordfokusbaar en interaktief is (soos skakels of vormkontroles). Alhoewel arbitrêre HTML-elemente (soos <span>s) fokusbaar gemaak kan word deur die tabindex="0"kenmerk by te voeg, sal dit potensieel irriterende en verwarrende tabstops op nie-interaktiewe elemente vir sleutelbordgebruikers byvoeg, en die meeste ondersteunende tegnologieë kondig tans nie die nutswenk in hierdie situasie aan nie. Moet ook nie net daarop staatmaak hoveras die sneller vir jou nutswenk nie, want dit sal jou nutswenke onmoontlik maak om vir sleutelbordgebruikers te aktiveer.

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

Gedeaktiveerde elemente

Elemente met die disabledkenmerk is nie interaktief nie, wat beteken dat gebruikers nie kan fokus, beweeg of daarop klik om 'n nutswenk (of popover) te aktiveer nie. As 'n oplossing, sal jy die nutswenk wil aktiveer vanaf 'n omhulsel <div>of <span>, ideaal gemaak sleutelbord-fokusbaar met tabindex="0", en die pointer-eventsop die gedeaktiveerde element ignoreer.

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-animation="".

Let daarop dat om sekuriteitsredes die sanitize, sanitizeFnen whiteListopsies nie verskaf kan word deur data-kenmerke te gebruik nie.
Naam Tik Verstek Beskrywing
animasie boolean waar Pas 'n CSS-vervaag-oorgang toe op die nutswenk
houer tou | element | onwaar onwaar

Voeg die nutswenk by 'n spesifieke element. Voorbeeld: container: 'body'. Hierdie opsie is veral nuttig omdat dit jou in staat stel om die nutspunt in die vloei van die dokument naby die snellerelement te plaas - wat sal verhoed dat die nutswenk van die snellerelement wegdryf tydens 'n venstergrootte.
vertraging nommer | voorwerp 0

Vertraag om die nutswenk (ms) te wys en te verberg - is nie van toepassing op handmatige snellertipe nie

As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys

Voorwerpstruktuur is:delay: { "show": 500, "hide": 100 }
html boolean onwaar

Laat HTML toe in die nutswenk.

Indien waar, sal HTML-merkers in die nutswenk s'n titlein die nutswenk weergegee word. Indien onwaar, sal jQuery se textmetode gebruik word om inhoud in die DOM in te voeg.

Gebruik teks as jy bekommerd is oor XSS-aanvalle.
plasing tou | funksie 'Top'

Hoe om die nutswenk te posisioneer - outomaties | top | onderste | links | reg.
Wanneer autogespesifiseer word, sal dit die nutswenk dinamies heroriënteer.

Wanneer 'n funksie gebruik word om die plasing te bepaal, word dit genoem met die tooltip DOM node as sy eerste argument en die sneller element DOM node as sy tweede. Die thiskonteks is ingestel op die tooltip-instansie.
keurder tou | onwaar onwaar As 'n kieser verskaf word, sal tooltip-objekte na die gespesifiseerde teikens gedelegeer word. In die praktyk word dit gebruik om ook gereedskapwenke toe te pas op dinamies bygevoegde DOM-elemente ( jQuery.onondersteuning). Sien hierdie en 'n insiggewende voorbeeld .
sjabloon string '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Baseer HTML om te gebruik wanneer die nutswenk geskep word.

Die tooltip's titlesal in die .tooltip-inner.

.arrowsal die nutspunt se pyl word.

Die buitenste omhulselelement moet die .tooltipklas en role="tooltip".
titel tou | element | funksie ''

Verstek titelwaarde as titlekenmerk nie teenwoordig is nie.

As 'n funksie gegee word, sal dit opgeroep word met sy thisverwysingsstel na die element waaraan die nutswenk gekoppel is.
sneller string 'sweef fokus'

Hoe tooltip geaktiveer word - klik | beweeg | fokus | handleiding. Jy kan verskeie snellers slaag; skei hulle met 'n spasie.

'manual'dui aan dat die nutswenk programmaties geaktiveer sal word via die .tooltip('show'), .tooltip('hide')en .tooltip('toggle')metodes; hierdie waarde kan nie met enige ander sneller gekombineer word nie.

'hover'op sy eie sal lei tot gereedskapwenke wat nie via die sleutelbord geaktiveer kan word nie, en moet slegs gebruik word as alternatiewe metodes vir die oordra van dieselfde inligting vir sleutelbordgebruikers teenwoordig is.
verreken nommer | tou | funksie 0

Verskuiwing van die nutswenk relatief tot sy teiken.

Wanneer 'n funksie gebruik word om die offset te bepaal, word dit opgeroep met 'n objek wat die offsetdata as sy eerste argument bevat. Die funksie moet 'n voorwerp met dieselfde struktuur terugstuur. Die snellerelement DOM-nodus word as die tweede argument deurgegee.

Vir meer inligting, verwys na Popper se offset-dokumente .
terugvalplasing tou | skikking 'flip' Laat toe om te spesifiseer watter posisie Popper op terugval sal gebruik. Vir meer inligting, verwys na Popper se gedragsdokumente
pasgemaakte Klas tou | funksie ''

Voeg klasse by die nutswenk wanneer dit gewys word. Let daarop dat hierdie klasse bygevoeg sal word bykomend tot enige klasse wat in die sjabloon gespesifiseer word. Om veelvuldige klasse by te voeg, skei hulle met spasies: 'a b'.

Jy kan ook 'n funksie deurgee wat 'n enkele string moet terugstuur wat bykomende klasname bevat.
grens tou | element 'scrollParent' Oorloop beperkingsgrens van die nutswenk. Aanvaar die waardes van 'viewport', 'window', 'scrollParent', of 'n HTMLElement-verwysing (slegs JavaScript). Vir meer inligting, verwys na Popper se preventOverflow-dokumente .
ontsmet boolean waar Aktiveer of deaktiveer die ontsmetting. Indien geaktiveer 'template'en 'title'opsies sal ontsmet word. Sien die ontsmettingsmiddel-afdeling in ons JavaScript-dokumentasie .
witlys voorwerp Standaard waarde Voorwerp wat toegelate eienskappe en etikette bevat
ontsmetFn nul | funksie nul Hier kan jy jou eie ontsmettingsfunksie verskaf. Dit kan nuttig wees as jy verkies om 'n toegewyde biblioteek te gebruik om ontsmetting uit te voer.
popperConfig nul | voorwerp nul Sien Popper se konfigurasie om Bootstrap se verstek Popper-konfigurasie te verander

Data-kenmerke vir individuele gereedskapwenke

Opsies vir individuele gereedskapwenke kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke, soos hierbo verduidelik.

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting .

$().tooltip(options)

Heg 'n nutswenk-hanteerder aan 'n elementversameling.

.tooltip('show')

Onthul 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk werklik gewys is (dws voor die shown.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die nutswenk. Gereedskapwenke met titels van geen lengte word nooit vertoon nie.

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

.tooltip('hide')

Versteek 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk eintlik versteek is (dws voor die hidden.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die nutswenk.

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

.tooltip('toggle')

Wissel 'n element se nutswenk. Keer terug na die oproeper voordat die nutswenk werklik gewys of versteek is (dws voordat die shown.bs.tooltipof hidden.bs.tooltipgebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die nutswenk.

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

.tooltip('dispose')

Versteek en vernietig 'n element se nutswenk. Gereedskapwenke wat delegering gebruik (wat met die selectoropsie geskep word ) kan nie individueel op afstammelinge-snellerelemente vernietig word nie.

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

.tooltip('enable')

Gee 'n element se nutswenk die vermoë om gewys te word. Gereedskapwenke is by verstek geaktiveer.

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

.tooltip('disable')

Verwyder die vermoë om 'n element se nutswenk te wys. Die nutswenk sal slegs gewys kan word as dit weer geaktiveer is.

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

.tooltip('toggleEnabled')

Wissel die vermoë vir 'n element se nutswenk om gewys of versteek te word.

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

.tooltip('update')

Dateer die posisie van 'n element se nutswenk op.

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

Gebeurtenisse

Soort gebeurtenis Beskrywing
wys.bs.nutspunt Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word.
gewys.bs.nutspunt Hierdie gebeurtenis word afgevuur wanneer die nutswenk vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi).
versteek.bs.nutspunt Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hideinstansiemetode geroep is.
versteekte.bs.nutspunt Hierdie gebeurtenis word afgevuur wanneer die nutswenk klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).
ingevoeg.bs.nutstip Hierdie gebeurtenis word afgevuur na die show.bs.tooltipgebeurtenis wanneer die nutswenk-sjabloon by die DOM gevoeg is. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})