Popovers

Superrigardo

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

• Popovers fidas je la triaparta biblioteko Popper por poziciigado. Vi devas inkluzivi popper.min.js antaŭ bootstrap.js, aŭ uzi unu bootstrap.bundle.min.jskiu enhavas Popper.
• Popovers postulas la popover kromaĵon kiel dependeco.
• 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.

Ekzemploj

Ebligu popovers

Kiel menciite supre, vi devas pravalorigi popovers antaŭ ol ili povas esti uzataj. Unu maniero pravalorigi ĉiujn popovers sur paĝo estus elekti ilin laŭ ilia data-bs-toggleatributo, tiel:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Viva demonstraĵo

Ni uzas JavaScript similan al la ĉi-supra fragmento por bildigi la sekvan vivan popover. Titoloj estas agordita per data-bs-titlekaj korpa enhavo estas agordita per data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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: supre, dekstre, malsupre kaj maldekstre. Direktoj estas spegulitaj kiam vi uzas Bootstrap en RTL. Agordu data-bs-placementŝanĝi la direkton.

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

Kutimocontainer

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. Ĉi tio estas ofta en respondemaj tabeloj, eniggrupoj kaj similaj.

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

Alia situacio kie vi volas agordi eksplicitan kutimon containerestas popovers ene de modala dialogo , por certigi ke la popover mem estas almetita al la modalo. Ĉi tio estas precipe grava por popovers kiuj enhavas interagajn elementojn - modalaj dialogoj kaptos fokuson, do krom se la popover estas infanelemento de la modalo, uzantoj ne povos fokusigi aŭ aktivigi ĉi tiujn interagajn elementojn.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Propraj popovers

Vi povas agordi la aspekton de popovers per CSS-variabloj . Ni starigas kutiman klason kun data-bs-custom-class="custom-popover"por ampleksi nian kutiman aspekton kaj uzi ĝin por superregi iujn el la lokaj CSS-variabloj.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS

Variabloj

Kiel parto de la aliro al evoluantaj CSS-variabloj de Bootstrap, popovers nun uzas lokajn CSS .popover-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass-variabloj

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Uzado

Ebligu popovers per JavaScript:

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

Opcioj

Ĉar opcioj povas esti pasigitaj per datumaj atributoj aŭ JavaScript, vi povas almeti opcionomon al data-bs-, kiel en data-bs-animation="{value}". Nepre ŝanĝu la kazon de la opcionomo de " camelCase " al " kebab-case " kiam vi pasas la opciojn per datumaj atributoj. Ekzemple, uzu data-bs-custom-class="beautifier"anstataŭ data-bs-customClass="beautifier".

Ekde Bootstrap 5.2.0, ĉiuj komponantoj subtenas eksperimentan rezervitan datuman atributon data-bs-config, kiu povas enhavi simplan komponan agordon kiel JSON-ĉeno. Kiam elemento havas data-bs-config='{"delay":0, "title":123}'kaj data-bs-title="456"atributojn, la fina titlevaloro estos 456kaj la apartaj datumaj atributoj anstataŭigos valorojn donitajn sur data-bs-config. Krome, ekzistantaj datumaj atributoj povas enhavi JSON-valorojn kiel data-bs-delay='{"show":0,"hide":150}'.

Uzante funkcion kunpopperConfig

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

Metodoj

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Eventoj

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