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é white-space: nowrap;on <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 ku 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 containerjadi 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 pemicu 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 the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.
content string | element | function ''

Default content value if data-content attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.
delay number | object 0

Delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { "show": 500, "hide": 100 }
html boolean false Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'right'

How to position the popover - auto | top | bottom | left | right.
When auto is specified, it will dynamically reorient the popover.

When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.
selector string | false false If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-header.

The popover's content will be injected into the .popover-body.

.arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.
title string | element | function ''

Default title value if title attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.
trigger string 'click' How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.
offset number | string 0 Offset of the popover relative to its target. For more information refer to Popper.js's offset docs.
fallbackPlacement string | array 'flip' Allow to specify which position Popper will use on fallback. For more information refer to Popper.js's behavior docs
boundary string | element 'scrollParent' Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

Data attributes for individual popovers

Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

Methods

Asynchronous methods and transitions

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