Source

Popovers

Dokuméntasi sareng conto pikeun nambihan popovers Bootstrap, sapertos anu aya dina ios, kana unsur naon waé dina situs anjeun.

Ihtisar

Hal-hal anu kedah terang nalika nganggo plugin popover:

  • Popovers ngandelkeun perpustakaan pihak ka-3 Popper.js pikeun posisi. Anjeun kedah ngalebetkeun popper.min.js sateuacan bootstrap.js atanapi nganggo bootstrap.bundle.min.js/ bootstrap.bundle.jsanu ngandung Popper.js supados popovers tiasa dianggo!
  • Popovers merlukeun plugin tooltip salaku kagumantungan.
  • Upami anjeun nuju ngawangun JavaScript kami tina sumber, peryogiutil.js .
  • Popovers milih pikeun alesan kinerja, janten anjeun kedah ngamimitian nyalira .
  • Nol-panjang titlejeung contentnilai moal nembongkeun popover a.
  • Sebutkeun container: 'body'pikeun nyegah masalah rendering dina komponén anu langkung kompleks (sapertos grup input kami, grup tombol, jsb).
  • Triggering popovers on elemen disumputkeun moal jalan.
  • Popovers pikeun .disabledatawa disabledelemen kudu dipicu dina unsur wrapper.
  • Nalika dipicu tina jangkar anu ngabungkus sababaraha garis, popovers bakal dipuseurkeun antara lebar sadayana jangkar. Paké .text-nowrapon <a>s anjeun ulah kabiasaan ieu.
  • Popovers kudu disumputkeun saméméh elemen pakait maranéhanana geus dihapus tina DOM.

Tetep maca pikeun ningali kumaha popovers dianggo sareng sababaraha conto.

Conto: Aktipkeun popovers dimana-mana

Salah sahiji cara pikeun ngamimitian sadayana popovers dina halaman nyaéta milih aranjeunna dumasar kana data-toggleatributna:

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

Conto: Ngagunakeun containerpilihan

Lamun anjeun boga sababaraha gaya dina unsur indungna nu ngaganggu popover a, anjeun bakal hoyong nangtukeun custom a containersangkan HTML nu popover urang némbongan dina unsur éta gantina.

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

Contona

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

Opat arah

Opat pilihan sadia: luhur, katuhu, handap, jeung kénca Blok.

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

Leupaskeun dina klik salajengna

Anggo focuspemicu pikeun ngaleungitkeun popovers dina klik salajengna pangguna tina unsur anu béda ti unsur toggle.

Markup spésifik dipikabutuh pikeun dismiss-on-next-click

Pikeun paripolah cross-browser sareng cross-platform anu leres, anjeun kedah nganggo <a>tag, sanés tag <button>, sareng anjeun ogé kedah ngalebetkeun tabindexatribut.

Popover anu tiasa dileungitkeun 
<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'
})

Unsur ditumpurkeun

Unsur-unsur anu gaduh disabledatribut henteu interaktif, hartosna pangguna henteu tiasa hover atanapi ngaklikana pikeun memicu popover (atanapi tooltip). Salaku workaround a, Anjeun bakal hoyong micu popover ti wrapper <div>atawa <span>jeung override pointer-eventsdina unsur ditumpurkeun.

Pikeun pemicu popover anu ditumpurkeun, anjeun ogé tiasa resep data-trigger="hover"supados popover muncul salaku eupan balik visual langsung ka pangguna anjeun sabab henteu nyangka ngaklik unsur anu ditumpurkeun.

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

Pamakéan

Aktipkeun popovers via JavaScript:

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

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-animation="".

Ngaran Tipe Default Katerangan
animasi boolean leres Larapkeun transisi fade CSS kana popover
wadahna string | unsur | palsu palsu

Appends popover ka elemen husus. Contona: container: 'body'. Pilihan ieu hususna kapaké sabab ngamungkinkeun anjeun pikeun nempatkeun popover dina aliran dokumen caket unsur pemicu - anu bakal nyegah popover ngambang jauh tina unsur pemicu nalika ngarobih ukuran jandela.
eusi string | unsur | fungsi ''

Nilai eusi standar upami data-contentatribut teu aya.

Upami fungsina dipasihkeun, éta bakal disebat sareng thisrujukanna disetel ka unsur anu napel popover.
reureuh angka | objék 0

Reureuh némbongkeun sarta nyumputkeun popover (ms) - teu dilarapkeun ka tipe pemicu manual

Lamun jumlah disadiakeun, reureuh diterapkeun ka duanana nyumputkeun / acara

Struktur objék nyaéta:delay: { "show": 500, "hide": 100 }
html boolean palsu Selapkeun HTML kana popover nu. Upami palsu, textmetode jQuery bakal dianggo pikeun nyelapkeun eusi kana DOM. Anggo téks upami anjeun hariwang ngeunaan serangan XSS.
panempatan string | fungsi 'leres'

Kumaha posisi popover - otomatis | luhur | handap | ditinggalkeun | leres.
Nalika autodieusian, éta bakal dinamis reorient popover.

Nalika fungsi dipaké pikeun nangtukeun panempatan, mangka disebut titik popover DOM salaku argumen kahijina sarta triggering unsur titik DOM salaku kadua. Kontéks thisdisetel ka conto popover.
pamilih string | palsu palsu Upami pamilih disayogikeun, obyék popover bakal didelegasikeun ka target anu ditangtukeun. Dina prakték, ieu dipaké pikeun ngaktipkeun eusi HTML dinamis boga popovers ditambahkeun. Tingali ieu sareng conto informatif .
citakan senar '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Dasar HTML pikeun dianggo nalika nyiptakeun popover.

The popover urang titlebakal nyuntik kana .popover-header.

The popover urang contentbakal nyuntik kana .popover-body.

.arrowbakal janten panah popover.

Unsur wrapper pangluarna kudu boga .popoverkelas.
judul string | unsur | fungsi ''

Nilai judul standar upami titleatribut teu aya.

Upami fungsina dipasihkeun, éta bakal disebat sareng thisrujukanna disetel ka unsur anu napel popover.
pemicu senar 'klik' Kumaha popover dipicu - klik | ngalayang | fokus | manual. Anjeun tiasa ngalangkungan sababaraha pemicu; misahkeun aranjeunna kalayan spasi. manualteu bisa digabungkeun jeung sagala pemicu séjén.
ngimbangan angka | senar 0 Offset tina popover relatif ka target na. Kanggo inpo nu leuwih lengkep tingal docs offset Popper.js urang .
fallbackPlacement string | susunan 'malik' Ngidinan pikeun nangtukeun posisi Popper anu bakal dianggo dina fallback. Kanggo inpo nu leuwih lengkep tingal docs kabiasaan Popper.js urang
wates string | unsur 'scrollParent' Ngabahekeun wates konstrain tina popover nu. Narima nilai 'viewport', 'window', 'scrollParent', atawa rujukan HTMLElement (JavaScript wungkul). Kanggo inpo nu leuwih lengkep tingal Popper.js urang preventOverflow docs .

Atribut data pikeun popovers individu

Pilihan pikeun popovers individu bisa Alternatipna dieusian ngaliwatan pamakéan atribut data, sakumaha dipedar di luhur.

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tingali dokuméntasi JavaScript kami kanggo inpormasi lengkep.

$().popover(options)

Initializes popovers pikeun kumpulan unsur.

.popover('show')

Nembongkeun popover unsur. Mulih ka panelepon saméméh popover sabenerna geus ditémbongkeun (ie saméméh shown.bs.popoveracara lumangsung). Ieu dianggap "manual" triggering of popover nu. Popovers anu judulna sareng eusina nol-panjangna henteu pernah ditampilkeun.

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

.popover('hide')

Nyumputkeun popover unsur. Mulih ka panelepon saméméh popover sabenerna geus disumputkeun (ie saméméh hidden.bs.popoveracara lumangsung). Ieu dianggap "manual" triggering of popover nu.

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

.popover('toggle')

Toggles popover unsur urang. Mulih ka nu nelepon saméméh popover sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.popoveratawa hidden.bs.popoverkajadian lumangsung). Ieu dianggap "manual" triggering of popover nu.

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

.popover('dispose')

Nyumputkeun sareng ngancurkeun popover unsur. Popovers nu make delegasi (anu dijieun maké pilihanselector ) teu bisa individual ancur dina elemen pemicu turunan.

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

.popover('enable')

Méré popover hiji unsur kamampuhan pikeun ditingalikeun. Popovers diaktipkeun sacara standar.

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

.popover('disable')

Ngahapus kamampuan popover unsur pikeun ditingalikeun. Popover ngan bakal tiasa ditingalikeun upami diaktipkeun deui.

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

.popover('toggleEnabled')

Toggles kamampuhan pikeun popover unsur pikeun ditémbongkeun atawa disumputkeun.

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

.popover('update')

Ngamutahirkeun posisi popover unsur.

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

Kajadian

Jenis Acara Katerangan
show.bs.popover Kajadian ieu langsung hurung nalika showmetode conto disebut.
ditémbongkeun.bs.popover Kajadian ieu dipecat nalika popover parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé).
hide.bs.popover Kajadian ieu langsung dipecat nalika hidemetode conto parantos disebut.
disumputkeun.bs.popover Acara ieu dipecat nalika popover parantos disumputkeun tina pangguna (bari ngantosan transisi CSS réngsé).
diselapkeun.bs.popover Kajadian ieu dipecat sanggeus show.bs.popoverkajadian nalika template popover geus ditambahkeun kana DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})