Source

Konsiletoj

Dokumentado kaj ekzemploj por aldoni kutimajn Bootstrap-konsiletojn kun CSS kaj JavaScript uzante CSS3 por kuraĝigoj kaj datumoj-atributoj por loka titolstokado.

Superrigardo

Aferoj sciindaj kiam uzado de la konsileto-kromaĵo:

  • Konsiletoj dependas de la tria-partia biblioteko Popper.js por poziciigado. Vi devas inkluzivi popper.min.js antaŭ bootstrap.js aŭ uzi bootstrap.bundle.min.js/ bootstrap.bundle.jskiu enhavas Popper.js por ke konsiletoj funkciu!
  • Se vi konstruas nian JavaScript el la fonto, ĝi postulasutil.js .
  • Konsiletoj estas elekteblaj pro agado-kialoj, do vi devas pravigi ilin mem .
  • Konsiletoj kun nullongaj titoloj neniam estas montrataj.
  • Specifu container: 'body'por eviti bildigajn problemojn en pli kompleksaj komponantoj (kiel niaj eniggrupoj, butongrupoj, ktp).
  • Deĉenigi konsiletojn pri kaŝitaj elementoj ne funkcios.
  • Konsiletoj por .disabledaŭ disabledelementoj devas esti ekigitaj sur envolvaĵelemento.
  • Kiam ĝi estas ekigita de hiperligoj kiuj ampleksas plurajn liniojn, konsiletoj estos centritaj. Uzu white-space: nowrap;sur via <a>por eviti ĉi tiun konduton.
  • Konsiletoj devas esti kaŝitaj antaŭ ol iliaj respondaj elementoj estis forigitaj de la DOM.

Ĉu vi havas ĉion tion? Bonege, ni vidu kiel ili funkcias kun kelkaj ekzemploj.

Ekzemplo: Ebligu konsiletojn ĉie

Unu maniero pravalorigi ĉiujn konsiletojn sur paĝo estus elekti ilin laŭ ilia data-toggleatributo:

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

Ekzemploj

Ŝvebu super la subaj ligiloj por vidi konsiletojn:

Streĉaj pantalonoj sekva nivelo keffiyeh vi verŝajne ne aŭdis pri ili. Fotobudo barbo kruda denim tipografio vegana mesaĝisto sako stumptown. Farm-al-table seitan, mcsweeney's fixie daŭrigebla kvinoa 8-bita amerika vestaĵo havas terry richardson vinilĉambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, kvar loko mcsweeney's pure vegan chambray. Vere ironia metiisto whatever keytar , scenester farm-to-table banksy Austin twitter tenilo freegan cred kruda denim unu-devena kafo viral.

Ŝvebu super la subaj butonoj por vidi la kvar konsiletojn: supre, dekstre, malsupre kaj maldekstre.

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

Kaj kun kutima HTML aldonita:

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

Uzado

La kromkonsileto generas enhavon kaj markadon laŭpeto, kaj defaŭlte metas konsiletojn post ilia ellasilelemento.

Ekfunkciigu la konsileton per JavaScript:

$('#example').tooltip(options)
Superfluo autokajscroll

Konsileto-pozicio provas aŭtomate ŝanĝiĝi kiam gepatra ujo havas overflow: autoaŭ overflow: scrollŝatas nian .table-responsive, sed daŭre konservas la poziciigon de la origina lokigo. Por solvi, agordu la boundaryopcion al io alia ol defaŭlta valoro, 'scrollParent'kiel ekzemple 'window':

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

Markado

La bezonata markado por konsileto estas nur dataatributo kaj titlesur la HTML-elemento vi deziras havi konsileton. La generita markado de konsileto estas sufiĉe simpla, kvankam ĝi postulas pozicion (defaŭlte, agordita topde la kromaĵo).

Funkcii konsiletojn por uzantoj de klavaro kaj helpteknologio

Vi nur aldonu konsiletojn al HTML-elementoj, kiuj tradicie estas klavar-fokuseblaj kaj interagaj (kiel ekzemple ligiloj aŭ formularaj kontroloj). Kvankam arbitraj HTML-elementoj (kiel <span>s) povas esti enfokusigitaj aldonante la tabindex="0"atributon, tio aldonos eble ĝenajn kaj konfuzajn tabuladojn sur ne-interagaj elementoj por klavaruzantoj. Krome, la plej multaj helpaj teknologioj nuntempe ne anoncas la konsileton en ĉi tiu situacio.

Aldone, ne fidu nur hoverkiel la ellasilon por via konsileto, ĉar ĉi tio faros viajn konsiletojn neeble ekfunkcieblaj por klavaruzantoj.

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

Malebligitaj elementoj

Elementoj kun la disabledatributo ne estas interagaj, tio signifas, ke uzantoj ne povas fokusi, ŝvebi aŭ klaki ilin por ekigi konsileton (aŭ popover). Kiel solvo, vi volas ekigi la konsileton de envolvaĵo <div>aŭ <span>, ideale farigita klavar-fokusebla per tabindex="0", kaj anstataŭi la pointer-eventssur la malfunkciigita elemento.

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

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-animation="".

Nomo Tajpu Defaŭlte Priskribo
animacio bulea vera Apliki CSS-fade-transiron al la konsileto
ujo ŝnuro | elemento | malvera malvera

Aldonas la konsileton al specifa elemento. Ekzemplo: container: 'body'. Ĉi tiu opcio estas precipe utila pro tio, ke ĝi ebligas al vi poziciigi la konsileton en la fluo de la dokumento proksime de la ekiganta elemento - kio malhelpos, ke la ilotipo flosu for de la ekiganta elemento dum fenestro-regrandigo.
prokrasto nombro | objekto 0

Prokrasto montri kaj kaŝi la konsileton (ms) - ne validas por mana ellasiltipo

Se nombro estas provizita, prokrasto estas aplikata al ambaŭ kaŝi/montri

Objekta strukturo estas:delay: { "show": 500, "hide": 100 }
html bulea malvera

Permesu HTML en la konsileto.

Se vera, HTML-etikedoj en la konsileto titleestos prezentitaj en la konsileto. Se malvera, la textmetodo de jQuery estos uzata por enmeti enhavon en la DOM.

Uzu tekston se vi zorgas pri XSS-atakoj.
lokigo ŝnuro | funkcio 'supro'

Kiel poziciigi la konsileton - aŭtomata | supro | fundo | maldekstra | ĝuste.
Kiam autoestas specifita, ĝi dinamike reorientiĝos la konsileto.

Kiam funkcio estas uzata por determini la lokigon, ĝi estas vokita kun la konsileto DOM-nodo kiel sia unua argumento kaj la ekiganta elemento DOM-nodo kiel sia dua. La thiskunteksto estas agordita al la konsileto-instanco.
elektilo ŝnuro | malvera malvera Se elektilo estas disponigita, konsiletaj objektoj estos delegitaj al la specifitaj celoj. En praktiko, ĉi tio estas uzata por ebligi dinamikan HTML-enhavon por aldoni popovers. Vidu ĉi tion kaj informan ekzemplon .
ŝablono ŝnuro '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Baza HTML por uzi dum kreado de la konsileto.

La konsileto titleestos injektitaj en la .tooltip-inner.

.arrowfariĝos la sago de la konsileto.

La plej ekstera envolvaĵelemento devus havi la .tooltipklason kaj role="tooltip".
titolo ŝnuro | elemento | funkcio ''

Defaŭlta titolvaloro se titleatributo ne ĉeestas.

Se funkcio estas donita, ĝi estos vokita kun ĝia thisreferenco aro al la elemento al kiu la konsileto estas alfiksita.
ellasilon ŝnuro 'ŝveba fokuso'

Kiel la konsileto estas ekigita - alklaku | ŝvebi | fokuso | manlibro. Vi povas pasi plurajn ellasilon; apartigu ilin per spaco.

'manual'indikas ke la konsileto estos ekigita programe per la .tooltip('show'), .tooltip('hide')kaj .tooltip('toggle')metodoj; ĉi tiu valoro ne povas esti kombinita kun iu ajn alia ellasilo.

'hover'memstare rezultos en konsiletoj kiuj ne povas esti ekigitaj per la klavaro, kaj devus nur esti uzitaj se alternativaj metodoj por peri la samajn informojn por klavaruzantoj ĉeestas.
ofseto nombro | ŝnuro 0 Ofseto de la konsileto rilate al ĝia celo. Por pliaj informoj raportu al la ofsetaj dokumentoj de Popper.js .
faloLokigo ŝnuro | tabelo 'flip' Permesu specifi, kiun pozicion Popper uzos ĉe repliko. Por pliaj informoj raportu al la kondutdokumentoj de Popper.js
limo ŝnuro | elemento 'scrollParent' Superflua limo-limo de la konsileto. Akceptas la valorojn de 'viewport', 'window', 'scrollParent', aŭ HTMLElement-referenco (nur JavaScript). Por pliaj informoj raportu al preventOverflow- dokumentoj de Popper.js .

Datumaj atributoj por individuaj konsiletoj

Opcioj por individuaj konsiletoj povas alternative esti specifitaj per la uzo de datumaj atributoj, kiel klarigite supre.

Metodoj

Nesinkronaj metodoj kaj transiroj

Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .

Vidu nian JavaScript-dokumentaron por pliaj informoj.

$().tooltip(options)

Alligas konsileton pritraktilon al elementkolekto.

.tooltip('show')

Rivelas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis montrita (te antaŭ ol la shown.bs.tooltipevento okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto. Konsiletoj kun nullongaj titoloj neniam estas montrataj.

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

.tooltip('hide')

Kaŝas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis kaŝita (te antaŭ ol la hidden.bs.tooltipevento okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto.

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

.tooltip('toggle')

Ŝaltas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.tooltipevento hidden.bs.tooltipokazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto.

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

.tooltip('dispose')

Kaŝas kaj detruas la konsileton de elemento. Konsiletoj kiuj uzas delegacion (kiuj estas kreitaj per la selectoropcio ) ne povas esti individue detruitaj sur posteulaj ellasilelementoj.

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

.tooltip('enable')

Donas al la konsileto de elemento la kapablon esti montrita. Konsiletoj estas ebligitaj defaŭlte.

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

.tooltip('disable')

Forigas la kapablon por montri la konsileton de elemento. La konsileto nur povos esti montrita se ĝi estas reebligita.

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

.tooltip('toggleEnabled')

Ŝaltas la kapablon por ke la konsileto de elemento estu montrita aŭ kaŝita.

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

.tooltip('update')

Ĝisdatigas la pozicion de la konsileto de elemento.

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

Eventoj

Eventa Tipo Priskribo
montru.bs.ilotip Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita.
montrata.bs.ilotipo Ĉi tiu evento estas lanĉita kiam la konsileto estas videbla por la uzanto (atendos ke CSS-transiroj finiĝos).
kaŝi.bs.ilotip Ĉi tiu evento estas lanĉita tuj kiam la hideekzempla metodo estas vokita.
kaŝita.bs.ilotip Ĉi tiu evento estas lanĉita kiam la konsileto finiĝis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos).
enigita.bs.ilotip Ĉi tiu evento estas lanĉita post la show.bs.tooltipevento kiam la konsileto ŝablono estis aldonita al la DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})