Mga Popover

Dokumentasyon at mga halimbawa para sa pagdaragdag ng Bootstrap popovers, tulad ng mga matatagpuan sa iOS, sa anumang elemento sa iyong site.

Pangkalahatang-ideya

Mga bagay na dapat malaman kapag ginagamit ang popover plugin:

Umaasa ang mga Popover sa 3rd party na library na Popper.js para sa pagpoposisyon. Dapat mong isama ang popper.min.js bago ang bootstrap.js o gamitin ang bootstrap.bundle.min.js/ bootstrap.bundle.jsna naglalaman ng Popper.js upang gumana ang mga popover!
Kinakailangan ng mga Popover ang tooltip plugin bilang dependency.
Kung binubuo mo ang aming JavaScript mula sa pinagmulan, nangangailanganutil.js ito ng .
Ang mga popover ay nag-opt-in para sa mga dahilan ng pagganap, kaya dapat mong simulan ang mga ito sa iyong sarili .
Hindi kailanman magpapakita ng popover ang zero-length titleat mga value.content
Tukuyin container: 'body'upang maiwasan ang pag-render ng mga problema sa mas kumplikadong mga bahagi (tulad ng aming mga pangkat ng input, mga pangkat ng button, atbp).
Ang pag-trigger ng mga popover sa mga nakatagong elemento ay hindi gagana.
Dapat na ma-trigger ang mga popover para sa .disabledo mga disabledelemento sa isang elemento ng wrapper.
Kapag na-trigger mula sa mga anchor na bumabalot sa maraming linya, ang mga popover ay igitna sa pagitan ng kabuuang lapad ng mga anchor. Gamitin .text-nowrapsa iyong <a>s upang maiwasan ang pag-uugaling ito.
Dapat na itago ang mga popover bago maalis ang mga kaukulang elemento nito sa DOM.
Maaaring ma-trigger ang mga popover salamat sa isang elemento sa loob ng shadow DOM.

Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng accessibility .

Panatilihin ang pagbabasa upang makita kung paano gumagana ang mga popover kasama ang ilang mga halimbawa.

Halimbawa: Paganahin ang mga popover sa lahat ng dako

Ang isang paraan upang simulan ang lahat ng mga popover sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-togglekatangian:

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

Halimbawa: Gamit ang `container`opsyon

Kapag mayroon kang ilang mga istilo sa isang parent na elemento na nakakasagabal sa isang popover, gugustuhin mong tumukoy ng custom containerupang ang HTML ng popover ay lumabas na lang sa loob ng elementong iyon.

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

Halimbawa

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

Apat na direksyon

Apat na opsyon ang magagamit: naka-align sa itaas, kanan, ibaba, at kaliwa.

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

I-dismiss sa susunod na pag-click

Gamitin ang focustrigger upang i-dismiss ang mga popover sa susunod na pag-click ng user sa ibang elemento kaysa sa toggle na elemento.

Kinakailangan ang partikular na markup para sa dismiss-on-next-click

Para sa wastong cross-browser at cross-platform na pag-uugali, dapat mong gamitin ang <a>tag, hindi ang <button>tag, at dapat ka ring magsama ng tabindexattribute.

Na-dismiss na popover

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

Mga elementong may kapansanan

Ang mga elementong may disabledattribute ay hindi interactive, ibig sabihin, hindi maaaring i-hover o i-click ng mga user ang mga ito upang mag-trigger ng popover (o tooltip). Bilang isang solusyon, gugustuhin mong i-trigger ang popover mula sa isang wrapper <div>o <span>at i-override ang pointer-eventsnasa naka-disable na elemento.

Para sa mga na-disable na pag-trigger ng popover, maaari mo ring mas gusto data-trigger="hover"na ang popover ay lumitaw bilang agarang visual na feedback sa iyong mga user dahil maaaring hindi nila inaasahan na mag- click sa isang hindi pinaganang 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>

Paggamit

Paganahin ang mga popover sa pamamagitan ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Tandaan na para sa mga kadahilanang pangseguridad ang sanitize, sanitizeFnat mga whiteListopsyon ay hindi maibibigay gamit ang mga katangian ng data.

Pangalan	Uri	Default	Paglalarawan
animation	boolean	totoo	Maglapat ng CSS fade transition sa popover
lalagyan	string \| elemento \| mali	mali	Idinaragdag ang popover sa isang partikular na elemento. Halimbawa: `container: 'body'`. Ang pagpipiliang ito ay partikular na kapaki-pakinabang dahil pinapayagan ka nitong iposisyon ang popover sa daloy ng dokumento malapit sa nagti-trigger na elemento - na pipigil sa popover na lumutang palayo sa nag-trigger na elemento sa panahon ng pagbabago ng laki ng window.
nilalaman	string \| elemento \| function	''	Default na halaga ng nilalaman kung `data-content`walang katangian. Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang `this`reference na nakatakda sa elemento kung saan ang popover ay naka-attach sa.
pagkaantala	numero \| bagay	0	Pagkaantala sa pagpapakita at pagtatago ng popover (ms) - hindi nalalapat sa manu-manong uri ng pag-trigger Kung may ibinigay na numero, ilalapat ang pagkaantala sa parehong itago/ipakita Ang istraktura ng bagay ay:`delay: { "show": 500, "hide": 100 }`
html	boolean	mali	Ipasok ang HTML sa popover. Kung mali, ang `text`pamamaraan ng jQuery ay gagamitin upang magpasok ng nilalaman sa DOM. Gumamit ng text kung nag-aalala ka tungkol sa mga pag-atake ng XSS.
pagkakalagay	string \| function	'tama'	Paano iposisyon ang popover - auto \| tuktok \| ibaba \| kaliwa \| tama. Kapag `auto`tinukoy, dynamic nitong i-reorient ang popover. Kapag ginamit ang isang function upang matukoy ang placement, tinatawag itong popover DOM node bilang unang argumento nito at ang triggering element na DOM node bilang pangalawa nito. Ang `this`konteksto ay nakatakda sa halimbawa ng popover.
tagapili	string \| mali	mali	Kung may ibibigay na selector, ang mga popover object ay idelegado sa mga tinukoy na target. Sa pagsasagawa, ito ay ginagamit upang paganahin ang dynamic na HTML na nilalaman na magkaroon ng mga popover na idinagdag. Tingnan ito at isang halimbawang nagbibigay-kaalaman .
template	string	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	Base HTML na gagamitin kapag gumagawa ng popover. Ang popover's `title`ay iturok sa `.popover-header`. Ang popover's `content`ay iturok sa `.popover-body`. `.arrow`ay magiging arrow ng popover. Ang pinakamalawak na elemento ng wrapper ay dapat magkaroon ng `.popover`klase.
pamagat	string \| elemento \| function	''	Default na halaga ng pamagat kung `title`walang katangian. Kung ang isang function ay ibinigay, ito ay tatawagin kasama ang `this`reference na nakatakda sa elemento kung saan ang popover ay naka-attach sa.
gatilyo	string	'click'	Paano na-trigger ang popover - i-click ang \| mag-hover \| focus \| manwal. Maaari kang magpasa ng maraming trigger; paghiwalayin sila ng isang puwang. `manual`hindi maaaring isama sa anumang iba pang trigger.
offset	numero \| string	0	Offset ng popover na nauugnay sa target nito. Para sa higit pang impormasyon sumangguni sa mga offset na doc ng Popper.js .
fallbackPlacement	string \| array	'flip'	Payagan na tukuyin kung aling posisyon ang gagamitin ng Popper sa fallback. Para sa higit pang impormasyon sumangguni sa mga doc ng pag -uugali ng Popper.js
hangganan	string \| elemento	'scrollParent'	Overflow constraint na hangganan ng popover. Tumatanggap ng mga value ng `'viewport'`, `'window'`, `'scrollParent'`, o isang HTMLElement reference (JavaScript lang). Para sa higit pang impormasyon sumangguni sa preventOverflow docs ng Popper.js .
sanitize	boolean	totoo	Paganahin o huwag paganahin ang sanitization. Kung na-activate `'template'`, `'content'`at `'title'`ang mga opsyon ay ma-sanitize.
whiteList	bagay	Default na halaga	Bagay na naglalaman ng mga pinapayagang katangian at tag
sanitizeFn	null \| function	wala	Dito maaari kang magbigay ng iyong sariling sanitize function. Maaari itong maging kapaki-pakinabang kung mas gusto mong gumamit ng nakalaang library para magsagawa ng sanitization.

Mga katangian ng data para sa mga indibidwal na popover

Ang mga opsyon para sa mga indibidwal na popover ay maaaring tukuyin sa pamamagitan ng paggamit ng mga katangian ng data, gaya ng ipinaliwanag sa itaas.

Paraan

Mga asynchronous na pamamaraan at paglipat

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

`$().popover(options)`

Initializes popovers for an element collection.

`.popover('show')`

Reveals an element’s popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover event occurs). This is considered a “manual” triggering of the popover. Popovers whose both title and content are zero-length are never displayed.

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

`.popover('hide')`

Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

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

`.popover('toggle')`

Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover or hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

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

`.popover('dispose')`

Hides and destroys an element’s popover. Popovers that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

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

`.popover('enable')`

Gives an element’s popover the ability to be shown. Popovers are enabled by default.

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

`.popover('disable')`

Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.

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

`.popover('toggleEnabled')`

Toggles the ability for an element’s popover to be shown or hidden.

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

`.popover('update')`

Updates the position of an element’s popover.

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

Events

Event Type	Description
show.bs.popover	This event fires immediately when the `show` instance method is called.
shown.bs.popover	This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.popover	This event is fired immediately when the `hide` instance method has been called.
hidden.bs.popover	This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.popover	Ang kaganapang ito ay pinapagana pagkatapos ng `show.bs.popover`kaganapan kapag ang template ng popover ay naidagdag sa DOM.

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