in English

Popovers

Dokumentado kaj ekzemploj por aldoni Bootstrap popovers, kiel tiuj trovitaj en iOS, al iu ajn elemento en via retejo.

Superrigardo

Aferoj sciindaj kiam vi uzas la popover-kromaĵon:

  • Popovers dependas de la tria-partia biblioteko Popper por poziciigado. Vi devas inkluzivi popper.min.js antaŭ bootstrap.js aŭ uzi bootstrap.bundle.min.js/ bootstrap.bundle.jskiu enhavas Popper por ke popovers funkciu!
  • Popovers postulas la konsileblan kromprogramon kiel dependecon.
  • Se vi konstruas nian JavaScript el la fonto, ĝi postulasutil.js .
  • Popovers estas aligeblaj pro rendimentokialoj, do vi devas pravigi ilin mem .
  • Nul-longo titlekaj contentvaloroj neniam montros popover.
  • Specifu container: 'body'por eviti bildigajn problemojn en pli kompleksaj komponantoj (kiel niaj eniggrupoj, butongrupoj, ktp).
  • Deĉenigi popovers sur kaŝitaj elementoj ne funkcios.
  • Popovers por .disableddisabledelementoj devas esti ekigitaj sur envolvaĵelemento.
  • Kiam ekigitaj de ankroj kiuj volvas trans multoblaj linioj, popovers estos centritaj inter la totala larĝo de la ankroj. Uzu .text-nowrapsur via <a>por eviti ĉi tiun konduton.
  • Popovers devas esti kaŝitaj antaŭ ol iliaj ekvivalentaj elementoj estis forigitaj de la DOM.
  • Popovers povas esti ekigitaj danke al elemento ene de ombro DOM.
Defaŭlte, ĉi tiu komponanto uzas la enkonstruitan enhavan sanigilon, kiu forigas ajnajn HTML-elementojn kiuj ne estas eksplicite permesitaj. Vidu la sekcion pri sanigilo en nia JavaScript-dokumentaro por pliaj detaloj.
La animacia efiko de ĉi tiu komponanto dependas de la prefers-reduced-motionamaskomunikila demando. Vidu la sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .

Daŭre legu por vidi kiel popovers funkcias kun kelkaj ekzemploj.

Ekzemplo: Ebligu popovers ĉie

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

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

Ekzemplo: Uzante la containeropcion

Kiam vi havas iujn stilojn sur gepatra elemento, kiuj malhelpas popover, vi volas specifi kutimon containerpor ke la HTML de la popover aperu ene de tiu elemento anstataŭe.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Ekzemplo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Kvar direktoj

Kvar opcioj estas disponeblaj: supro, dekstre, malsupre kaj maldekstre vicigitaj.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

Forĵeti ĉe sekva klako

Uzu la focusellasilon por malakcepti popovers ĉe la sekva klako de la uzanto de malsama elemento ol la baskuliga elemento.

Specifa markado bezonata por malakcepti-on-sekva-klako

Por taŭga trans-retumilo kaj transplatforma konduto, vi devas uzi la <a>etikedon, ne la <button>etikedon, kaj vi ankaŭ devas inkluzivi tabindexatributon.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

Malebligitaj elementoj

Elementoj kun la disabledatributo ne estas interagaj, tio signifas, ke uzantoj ne povas ŝvebi aŭ klaki ilin por ekigi popover (aŭ konsileto). Kiel solvo, vi volas ekigi la popover de envolvaĵo <div><span>kaj superregi la pointer-eventssur la malfunkciigita elemento.

Por malfunkciigitaj popover-eksiloj, vi ankaŭ preferas data-trigger="hover"tiel ke la popover aperu kiel tuja vida sugesto al viaj uzantoj ĉar ili eble ne atendas klaki sur malfunkciigita elemento.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Uzado

Ebligu popovers per JavaScript:

$('#example').popover(options)
GPU-akcelo

Popovers foje aperas neklaraj sur Windows 10-aparatoj pro GPU-akcelo kaj modifita sistemo DPI. La solvo por ĉi tio en v4 estas malŝalti GPU-akcelon laŭbezone sur viaj popovers.

Sugesta solvo:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Farante popovers funkcii por klavaro kaj helpteknologiuzantoj

Por permesi al klavaruzantoj aktivigi viajn popovers, vi devus nur aldoni ilin al HTML-elementoj kiuj estas tradicie 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, kaj la plej multaj helpaj teknologioj nuntempe ne anoncas la enhavon de la popover en ĉi tiu situacio. . Aldone, ne fidu nur hoverkiel la ellasilon por viaj popovers, ĉar ĉi tio ebligos ilin ekfunkciigi por klavaruzantoj.

Dum vi povas enmeti riĉan, strukturitan HTML-on en popovers kun la htmlopcio, ni forte rekomendas ke vi evitu aldoni troan kvanton da enhavo. La maniero kiel popovers nuntempe funkcias estas ke, unufoje montrata, ilia enhavo estas ligita al la ellasila elemento kun la aria-describedbyatributo. Kiel rezulto, la tuteco de la enhavo de la popover estos anoncita al helpteknologiuzantoj kiel unu longa, seninterrompa fluo.

Aldone, kvankam eblas ankaŭ inkluzivi interagajn kontrolojn (kiel formularelementojn aŭ ligilojn) en via popover (aldonante ĉi tiujn elementojn al la whiteListaŭ permesitaj atributoj kaj etikedoj), konsciu ke nuntempe la popover ne administras klavaran fokusordon. Kiam klavaruzanto malfermas popover, fokuso restas sur la ekiganta elemento, kaj ĉar la popover kutime ne tuj sekvas la ellasilon en la strukturo de la dokumento, ekzistas neniu garantio ke antaŭen/premado.TABmovos klavaran uzanton en la popover mem. Resume, simple aldoni interagajn kontrolojn al popover verŝajne igos ĉi tiujn kontrolojn neatingeblaj/neuzeblaj por klavaruzantoj kaj uzantoj de helpaj teknologioj, aŭ almenaŭ igos nelogikan ĝeneralan fokusan ordon. En ĉi tiuj kazoj, konsideru uzi modalan dialogon anstataŭe.

Opcioj

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

Notu, ke pro sekurecaj kialoj la opcioj sanitize, sanitizeFnkaj whiteListne povas esti provizitaj per datumaj atributoj.
Nomo Tajpu Defaŭlte Priskribo
animacio bulea vera Apliki CSS-fade-transiron al la popover
ujo ŝnuro | elemento | malvera malvera

Aldonas la popover al specifa elemento. Ekzemplo: container: 'body'. Ĉi tiu opcio estas precipe utila pro tio, ke ĝi ebligas al vi poziciigi la popover en la fluo de la dokumento proksime de la ekfunkciiga elemento - kio malhelpos ke la popover flosu for de la ekfunkciiga elemento dum fenestroregrandigo.

enhavo ŝnuro | elemento | funkcio ''

Defaŭlta enhavvaloro se data-contentatributo ne ĉeestas.

Se funkcio estas donita, ĝi estos vokita kun ĝia thisreferenco aro al la elemento al kiu la popover estas ligita.

prokrasto nombro | objekto 0

Prokrasto montri kaj kaŝi la popover (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 Enigu HTML en la popover. 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 'ĝuste'

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

Kiam funkcio estas uzata por determini la lokigon, ĝi estas vokita kun la popover DOM-nodo kiel sia unua argumento kaj la ekiga elemento DOM-nodo kiel sia dua. La thiskunteksto estas agordita al la popover-instanco.

elektilo ŝnuro | malvera malvera Se elektilo estas disponigita, popover-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="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Baza HTML por uzi dum kreado de la popover.

La popover-oj titleestos injektitaj en la .popover-header.

La popover-oj contentestos injektitaj en la .popover-body.

.arrowfariĝos la sago de la popover.

La plej ekstera envolvaĵelemento devus havi la .popoverklason.

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 popover estas ligita.

ellasilon ŝnuro 'klako' Kiel popover estas ekigita - klaku | ŝvebi | fokuso | manlibro. Vi povas pasi plurajn ellasilon; apartigu ilin per spaco. manualne povas esti kombinita kun iu ajn alia ellasilo.
ofseto nombro | ŝnuro 0 Ofseto de la popover relative al ĝia celo. Por pliaj informoj raportu al la ofsetaj dokumentoj de Popper .
faloLokigo ŝnuro | tabelo 'flip' Permesu specifi, kiun pozicion Popper uzos ĉe repliko. Por pliaj informoj referu al la kondutdokumentoj de Popper
kutimoKlaso ŝnuro | funkcio ''

Aldonu klasojn al la popover kiam ĝi montriĝas. Notu, ke ĉi tiuj klasoj estos aldonitaj aldone al iuj klasoj specifitaj en la ŝablono. Por aldoni plurajn klasojn, apartigu ilin per spacoj: 'a b'.

Vi ankaŭ povas pasi funkcion kiu devus resendi ununuran ĉenon enhavantan kromajn klasnomojn.

limo ŝnuro | elemento 'scrollParent' Superflua limo limo de la popover. Akceptas la valorojn de 'viewport', 'window', 'scrollParent', aŭ HTMLElement-referenco (nur JavaScript). Por pliaj informoj raportu al la dokumentoj preventOverflow de Popper .
sanigi bulea vera Ebligu aŭ malŝalti la sanigon. Se aktivigita 'template', 'content'kaj 'title'opcioj estos sanigitaj. Vidu la sekcion pri sanigilo en nia JavaScript-dokumentaro .
Blanka Listo objekto Defaŭlta valoro Objekto kiu enhavas permesitajn atributojn kaj etikedojn
sanigiFn nulo | funkcio nula Ĉi tie vi povas provizi vian propran sanigan funkcion. Ĉi tio povas esti utila se vi preferas uzi dediĉitan bibliotekon por fari sanigon.
popperConfig nulo | objekto nula Por ŝanĝi la defaŭltan Popper-agordon de Bootstrap, vidu la agordon de Popper

Datumaj atributoj por individuaj popovers

Opcioj por individuaj popovers povas alternative esti precizigitaj 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 .

$().popover(options)

Inicialigas popovers por elemento kolekto.

.popover('show')

Rivelas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive montriĝis (te antaŭ ol la shown.bs.popoverevento okazas). Ĉi tio estas konsiderita "manlibro" ekigado de la popover. Popovers kies titolo kaj enhavo ambaŭ estas nullongaj neniam estas montrataj.

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

.popover('hide')

Kaŝas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive estis kaŝita (te antaŭ ol la hidden.bs.popoverevento okazas). Ĉi tio estas konsiderita "manlibro" ekigado de la popover.

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

.popover('toggle')

Ŝaltas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive estis montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.popoverevento hidden.bs.popoverokazas). Ĉi tio estas konsiderita "manlibro" ekigado de la popover.

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

.popover('dispose')

Kaŝas kaj detruas la popover de elemento. Popovers kiuj uzas delegacion (kiuj estas kreitaj uzante la selectoropcion ) ne povas esti individue detruitaj sur posteulaj ellasilelementoj.

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

.popover('enable')

Donas al la popover de elemento la kapablon esti montrita. Popovers estas ebligitaj defaŭlte.

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

.popover('disable')

Forigas la kapablon por ke la popover de elemento estu montrita. La popover nur povos esti montrita se ĝi estas reebligita.

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

.popover('toggleEnabled')

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

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

.popover('update')

Ĝisdatigas la pozicion de la popover de elemento.

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

Eventoj

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