Source

Popovers

Documentation sy ohatra amin'ny fampidirana popovers Bootstrap, toy ny hita ao amin'ny iOS, amin'ny singa rehetra ao amin'ny tranokalanao.

Overview

Zavatra tokony ho fantatra rehefa mampiasa ny plugin popover:

  • Miantehitra amin'ny tranokalan'ny antoko fahatelo Popper.js ny Popovers amin'ny fametrahana toerana. Tsy maintsy ampidirinao ny popper.min.js alohan'ny bootstrap.js na ampiasao bootstrap.bundle.min.js/ bootstrap.bundle.jsizay misy Popper.js mba hahafahan'ny popovers miasa!
  • Ny Popovers dia mitaky ny plugin tooltip ho fiankinan-doha.
  • Raha manorina ny JavaScript avy amin'ny loharano ianao dia mitakyutil.js .
  • Popovers dia nisafidy noho ny antony fampisehoana, noho izany dia tsy maintsy ataonao voalohany izy ireo .
  • Ny halavan'ny aotra titlesy contentny soatoavina dia tsy hampiseho popover velively.
  • Mariho container: 'body'mba tsy hisian'ny olana amin'ny singa sarotra kokoa (toy ny vondrona fampidirana, vondrona bokotra, sns).
  • Tsy mandeha ny famelezana popover amin'ny singa miafina.
  • Ny popovers ho an'ny .disabledna disabledsinga dia tsy maintsy alefa amin'ny singa wrapper.
  • Rehefa avy amin'ny vatofantsika mihodidina andalana maromaro, ny popovers dia ho ivon'ny sakan'ny sakan'ny vatofantsika. Ampiasao .text-nowrapamin'ny <a>s anao mba hialana amin'izany fihetsika izany.
  • Tsy maintsy afenina ny popovers alohan'ny hanesorana ireo singa mifandraika aminy ao amin'ny DOM.

Tohizo ny famakiana hahitana ny fomba fiasan'ny popovers miaraka amin'ny ohatra sasany.

Ohatra: Alefaso ny popovers na aiza na aiza

Ny fomba iray hanombohana ny popovers rehetra amin'ny pejy iray dia ny fisafidianana azy ireo amin'ny data-toggletoetrany:

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

Ohatra: Mampiasa ny containersafidy

Rehefa manana fomba sasany amin'ny singa ray aman-dreny izay manelingelina ny popover ianao dia te-hametraka fomba amam-panao containermba hisehoan'ny HTML ny popover ao anatin'io singa io.

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

OHATRA

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

Lalana efatra

Misy safidy efatra: ambony, havanana, ambany ary havia.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Alefaso amin'ny tsindrio manaraka

Ampiasao ny focustrigger hanilika ny popovers amin'ny fipihana manaraka ataon'ny mpampiasa amin'ny singa hafa noho ny singa toggle.

Fanamafisana manokana ilaina amin'ny fandroahana-amin'ny-tsindrio manaraka

Ho an'ny fitondran-tena mifanandrify amin'ny navigateur sy cross-platform dia tsy maintsy mampiasa ny <a>marika ianao, fa tsy ny <button>tag, ary tsy maintsy ampidirinao koa ny tabindextoetra iray.

popover azo ariana 
<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'
})

singa kilemaina

Ny singa manana ny disabledtoetra dia tsy mifampiresaka, midika izany fa tsy afaka mivezivezy na manindry azy ireo ny mpampiasa mba hanesorana popover (na tooltip). Amin'ny maha-famoahana azy dia te-hamoaka ny popover avy amin'ny fonosana ianao <div>na <span>hanilika ny pointer-eventssinga kilemaina.

Ho an'ireo mpikatroka popover kilemaina, azonao atao koa data-trigger="hover"ny mampahatsiahy ny mpampiasa anao fa ny popover dia miseho ho fanehoan-kevitra hita maso eo no ho eo amin'ireo mpampiasa anao satria mety tsy hanantena izy ireo hanindry singa kilemaina.

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

Fampiasana

Alefaso ny popovers amin'ny JavaScript:

$('#example').popover(options)

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

Anarana Type toerana misy anao Description
fanentanana boolean marina Ampiharo CSS fade transition amin'ny popover
fitoeran-javatra string | singa | DISO DISO

Manampy ny popover amina singa iray manokana. Ohatra: container: 'body'. Ity safidy ity dia tena ilaina indrindra amin'ny ahafahanao mametraka ny popover amin'ny fikorianan'ny antontan-taratasy eo akaikin'ny singa mandrisika - izay hanakana ny popover tsy hitsingevana amin'ny singa mandrisika mandritra ny fanovana ny haben'ny varavarankely.
votoaty string | singa | asa ''

Sanda votoaty default raha data-contenttsy misy ny toetra.

Raha misy asa omena, dia hantsoina izy io miaraka amin'ny thisreference set amin'ny singa izay ampifandraisina amin'ny popover.
fahatarana laharana | zavatra 0

Fanemorana ny fampisehoana sy ny fanafenana ny popover (ms) - tsy mihatra amin'ny karazana trigger manual

Raha misy isa omena dia mihatra amin'ny fanafenana/seho ny fahatarana

Ny firafitry ny zavatra dia:delay: { "show": 500, "hide": 100 }
html boolean DISO Ampidiro ao anaty popover ny HTML. Raha diso, ny textfomba jQuery dia hampiasaina hampidirana votoaty ao amin'ny DOM. Mampiasà lahatsoratra raha manahy momba ny fanafihana XSS ianao.
fametrahana string | asa 'marina'

Ahoana ny fametrahana ny popover - auto | ambony | ambany | ankavia | marina.
Rehefa autovoatondro dia hamerenana amin'ny laoniny ny popover izany.

Rehefa ampiasaina hamaritana ny fametrahana ny asa iray, dia antsoina miaraka amin'ny node popover DOM ho tohan-kevitra voalohany ary ny singa DOM node ho azy faharoa. thisApetraka amin'ny ohatra popover ny contexte .
mpifidy string | DISO DISO Raha misy mpifidy omena, ny zavatra popover dia atolotra amin'ireo tanjona voafaritra. Amin'ny fampiharana, izany dia ampiasaina mba ahafahan'ny votoaty HTML mavitrika hampidirana popovers. Jereo ity ary ohatra misy fampahalalana .
môdely tady '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML ampiasaina rehefa mamorona ny popover.

Ny popover's titledia ampidirina ao amin'ny .popover-header.

Ny popover's contentdia ampidirina ao amin'ny .popover-body.

.arrowho lasa zana-tsipìka popover.

Ny singa famonosana ivelany indrindra dia tokony hanana ny .popoverkilasy.
lohateny string | singa | asa ''

Sanda titre default raha titletsy misy ny toetra.

Raha misy asa omena, dia hantsoina izy io miaraka amin'ny thisreference set amin'ny singa izay ampifandraisina amin'ny popover.
miteraka tady 'click' Ahoana no nanombohan'ny popover - tsindrio | hover | mifantoka | manual. Mety handalo trigger maromaro ianao; saraho amin'ny toerana iray izy ireo. manualtsy azo atambatra amin'ny trigger hafa.
offset laharana | tady 0 Offset ny popover mifandray amin'ny tanjona. Raha mila fanazavana fanampiny dia jereo ny Popper.js's offset docs .
fallbackPlacement string | fihaingoana 'atodiho' Avelao hamaritra hoe toerana inona no hampiasain'i Popper amin'ny fiverenana. Raha mila fanazavana fanampiny dia jereo ny doka momba ny fitondran -tenan'i Popper.js
sisin-tany string | singa 'scrollParent' sisin-tanin'ny famerana mihoa-pampana amin'ny popover. Manaiky ny sandan'ny 'viewport', 'window', 'scrollParent', na reference HTMLElement (JavaScript ihany). Raha mila fanazavana fanampiny dia jereo ny Popper.js's preventOverflow docs .

Toetran'ny data ho an'ny popovers tsirairay

Ny safidy ho an'ny popovers tsirairay dia azo faritana amin'ny alàlan'ny fampiasana ny toetran'ny data, araka ny hazavaina etsy ambony.

fomba

Fomba sy fifindrana asynchronous

Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

Jereo ny antontan-taratasinay JavaScript raha mila fanazavana fanampiny.

$().popover(options)

Manomboha popover ho an'ny fanangonana singa.

.popover('show')

Mampiseho popover singa iray. Miverina any amin'ny mpiantso alohan'ny tena naseho ny popover (izany hoe alohan'ny shown.bs.popovernitrangan'ny hetsika). Izany dia heverina ho "manual" triggering ny popover. Popovers ny lohateniny sy ny atiny dia aotra ny halavany dia tsy aseho mihitsy.

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

.popover('hide')

Manafina ny popover an'ny singa iray. Miverina amin'ny mpiantso alohan'ny nafenina ny popover (izany hoe alohan'ny hidden.bs.popovernitrangan'ny hetsika). Izany dia heverina ho "manual" triggering ny popover.

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

.popover('toggle')

Manova ny popover an'ny singa iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny popover (izany hoe talohan'ny nitrangan'ny shown.bs.popoverna hidden.bs.popoverhetsika). Izany dia heverina ho "manual" triggering ny popover.

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

.popover('dispose')

Manafina sy manimba ny popover singa iray. Popovers izay mampiasa delegasiona (izay noforonina amin'ny alalan'ny safidy selector) dia tsy azo ravana tsirairay amin'ny singa trigger taranaka.

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

.popover('enable')

Manome popover singa iray ny fahafahana aseho. Popovers dia alefa amin'ny alàlan'ny default.

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

.popover('disable')

Esory ny fahafahana hanehoana ny popover an'ny singa iray. Ny popover dia tsy ho azo aseho raha toa ka alefa indray.

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

.popover('toggleEnabled')

Manova ny fahafahan'ny popover an'ny singa iray aseho na afenina.

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

.popover('update')

Manavao ny toeran'ny popover an'ny singa iray.

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

zava-mitranga

Karazana hetsika Description
show.bs.popover Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
aseho.bs.popover Ity hetsika ity dia alefa rehefa naseho ho hitan'ny mpampiasa ny popover (hiandry ny famitana ny fifindrana CSS).
hide.bs.popover Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba fiasa.
hidden.bs.popover Ity hetsika ity dia alefa rehefa vita ny nafenina tamin'ny mpampiasa ny popover (hiandry ny famitana ny fifindrana CSS).
inserted.bs.popover Ity hetsika ity dia alefa aorian'ny show.bs.popoverhetsika rehefa nampidirina tao amin'ny DOM ny môdely popover. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})