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 faha-3 Popper 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 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.
• Ny popovers dia azo ariana noho ny singa iray ao anaty aloka 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="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>

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.

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

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

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="".

fomba

$().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 izay samy aotra ny lohateniny sy ny atiny 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

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})