Popovers

Superrigardo

Aferoj sciindaj kiam vi uzas la popover-kromaĵon:

• Popovers dependas de la tria-partia biblioteko Popper por poziciigado. Vi devas inkluzivi popper.min.js antaŭ bootstrap.js aŭ uzi bootstrap.bundle.min.js/ bootstrap.bundle.jskiu enhavas Popper por ke popovers funkciu!
• Popovers postulas la konsileblan kromprogramon kiel dependecon.
• Popovers estas aligeblaj pro rendimentokialoj, do vi devas pravigi ilin mem .
• Nul-longo titlekaj contentvaloroj neniam montros popover.
• Specifu container: 'body'por eviti bildigajn problemojn en pli kompleksaj komponantoj (kiel niaj eniggrupoj, butongrupoj, ktp).
• Deĉenigi popovers sur kaŝitaj elementoj ne funkcios.
• Popovers por .disabledaŭ disabledelementoj devas esti ekigitaj sur envolvaĵelemento.
• Kiam ekigitaj de ankroj kiuj volvas trans multoblaj linioj, popovers estos centritaj inter la totala larĝo de la ankroj. Uzu .text-nowrapsur via <a>por eviti ĉi tiun konduton.
• Popovers devas esti kaŝitaj antaŭ ol iliaj ekvivalentaj elementoj estis forigitaj de la DOM.
• Popovers povas esti ekigitaj danke al elemento ene de ombro DOM.

Daŭre legu por vidi kiel popovers funkcias kun kelkaj ekzemploj.

Ekzemplo: Ebligu popovers ĉie

Unu maniero pravalorigi ĉiujn popovers sur paĝo estus elekti ilin laŭ ilia data-bs-toggleatributo:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Ekzemplo: Uzante la containeropcion

Kiam vi havas iujn stilojn sur gepatra elemento, kiuj malhelpas popover, vi volas specifi kutimon containerpor ke la HTML de la popover aperu ene de tiu elemento anstataŭe.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Ekzemplo

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Kvar direktoj

Kvar opcioj estas disponeblaj: supro, dekstre, malsupre kaj maldekstre vicigitaj. Direktoj estas spegulitaj kiam vi uzas Bootstrap en RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Forĵeti ĉe sekva klako

Uzu la focusellasilon por malakcepti popovers ĉe la sekva klako de la uzanto de malsama elemento ol la baskuliga elemento.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

Malebligitaj elementoj

Elementoj kun la disabledatributo ne estas interagaj, tio signifas, ke uzantoj ne povas ŝvebi aŭ klaki ilin por ekigi popover (aŭ konsileto). Kiel solvo, vi volos ekigi la popover de envolvaĵo <div>aŭ <span>, ideale farite klavar-fokusebla per tabindex="0".

Por malfunkciigitaj popover-eksiloj, vi ankaŭ preferas data-bs-trigger="hover focus"tiel ke la popover aperu kiel tuja vida sugesto al viaj uzantoj ĉar ili eble ne atendas klaki sur malfunkciigita elemento.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Sass

Variabloj

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Uzado

Ebligu popovers per JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-, kiel en data-bs-animation="". Nepre ŝanĝu la kazon de la opcionomo de camelCase al kebab-case kiam vi transdonas la opciojn per datumaj atributoj. Ekzemple, anstataŭ uzi data-bs-customClass="beautifier", uzu data-bs-custom-class="beautifier".

Uzante funkcion kunpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Metodoj

montri

Rivelas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive montriĝis (te antaŭ ol la shown.bs.popoverevento okazas). Ĉi tio estas konsiderita "manlibro" ekigado de la popover. Popovers kies titolo kaj enhavo ambaŭ estas nullongaj neniam estas montrataj.

myPopover.show()

kaŝi

Kaŝas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive estis kaŝita (te antaŭ ol la hidden.bs.popoverevento okazas). Ĉi tio estas konsiderita "manlibro" ekigado de la popover.

myPopover.hide()

baskuli

Ŝaltas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive estis montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.popoverevento hidden.bs.popoverokazas). Ĉi tio estas konsiderita "manlibro" ekigado de la popover.

myPopover.toggle()

disponi

Kaŝas kaj detruas la popover de elemento (Forigas konservitajn datumojn sur la DOM-elemento). Popovers kiuj uzas delegacion (kiuj estas kreitaj uzante la selectoropcion ) ne povas esti individue detruitaj sur posteulaj ellasilelementoj.

myPopover.dispose()

ebligi

Donas al la popover de elemento la kapablon esti montrita. Popovers estas ebligitaj defaŭlte.

myPopover.enable()

malŝalti

Forigas la kapablon por ke la popover de elemento estu montrita. La popover nur povos esti montrita se ĝi estas reebligita.

myPopover.disable()

baskuligi Ebligita

Ŝaltas la kapablon por ke la popover de elemento estu montrita aŭ kaŝita.

myPopover.toggleEnabled()

ĝisdatigo

Ĝisdatigas la pozicion de la popover de elemento.

myPopover.update()

getInstance

Senmova metodo, kiu ebligas al vi akiri la popover-instancon asociitan kun DOM-elemento

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Senmova metodo, kiu ebligas al vi akiri la popover-instancon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita.

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Eventoj

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})