Popovers

Oersicht

Dingen om te witten by it brûken fan de popover-plugin:

• Popovers fertrouwe op de tredde partij bibleteek Popper foar posisjonearring. Jo moatte popper.min.js foar opnimme bootstrap.js, of ien brûke bootstrap.bundle.min.jsdy't Popper befettet.
• Popovers fereaskje de popover-plugin as ôfhinklikens.
• Popovers binne opt-in foar prestaasjesredenen, dus jo moatte se sels inisjalisearje .
• Nullengte titleen contentwearden sille nea in popover sjen litte.
• Spesifisearje container: 'body'om it werjaan fan problemen yn kompleksere komponinten te foarkommen (lykas ús ynfiergroepen, knopgroepen, ensfh.).
• It triggerjen fan popovers op ferburgen eleminten sil net wurkje.
• Popovers foar .disabledof disabledeleminten moatte wurde aktivearre op in wrapper elemint.
• Wannear't aktivearre fan ankers dy't wrap oer meardere rigels, popovers wurde sintraal tusken de ankers 'algemiene breedte. Brûk .text-nowrapop jo <a>s om dit gedrach te foarkommen.
• Popovers moatte ferburgen wurde foardat har oerienkommende eleminten binne fuortsmiten fan 'e DOM.
• Popovers kinne wurde oanlutsen troch in elemint binnen in skaad DOM.

Bliuw lêze om te sjen hoe't popovers wurkje mei guon foarbylden.

Foarbylden

Popovers ynskeakelje

Lykas hjirboppe neamd, moatte jo popovers inisjalisearje foardat se kinne wurde brûkt. Ien manier om alle popovers op in side te initialisearjen soe wêze om se te selektearjen troch har data-bs-toggleattribút, lykas sa:

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

Live demo

Wy brûke JavaScript fergelykber mei it snippet hjirboppe om de folgjende live popover wer te jaan. Titels wurde ynsteld fia data-bs-titleen lichem ynhâld wurdt ynsteld fia 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>

Fjouwer rjochtingen

Fjouwer opsjes binne beskikber: boppe, rjochts, ûnder en lofts. Rjochtingen wurde spegele by it brûken fan Bootstrap yn RTL. Ynstelle data-bs-placementom de rjochting te feroarjen.

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

Oanpastcontainer

As jo ​​​​in pear stilen hawwe op in âlderelemint dy't ynterferearje mei in popover, wolle jo in oanpaste spesifisearje containersadat de HTML fan 'e popover yn dat elemint ferskynt. Dit is gewoan yn responsive tabellen, ynfiergroepen, en sa.

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

In oare situaasje wêryn jo in eksplisite oanpaste ynstelle wolle containerbinne popovers yn in modaal dialoochfinster , om der wis fan te wêzen dat de popover sels is taheakke oan de modal. Dit is benammen wichtich foar popovers dy't ynteraktive eleminten befetsje - modale dialoochfinsters sille fokus trape, dus as it popover in bernelemint fan 'e modal is, kinne brûkers dizze ynteraktive eleminten net fokusje of aktivearje.

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

Oanpaste popovers

Jo kinne it uterlik fan popovers oanpasse mei CSS-fariabelen . Wy sette in oanpaste klasse mei data-bs-custom-class="custom-popover"om ús oanpaste uterlik te berikken en it te brûken om guon fan 'e lokale CSS-fariabelen te oerskriuwen.

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

Ferwiderje by folgjende klik

Brûk de focustrigger om popovers op de folgjende klik fan de brûker fan in oar elemint dan it wikselelemint te ûntslaan.

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

Utskeakele eleminten

Eleminten mei it disabledattribút binne net ynteraktyf, wat betsjuttet dat brûkers net kinne hoverje of klikke om in popover (of tooltip) te triggerjen. As oplossing wolle jo de popover triggerje fanút in wrapper <div>of <span>, ideaal makke toetseboerd-fokusber makke mei tabindex="0".

Foar útskeakele popover-triggers kinne jo ek leaver data-bs-trigger="hover focus"dat de popover ferskynt as direkte fisuele feedback foar jo brûkers, om't se miskien net ferwachtsje te klikken op in útskeakele elemint.

<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

Fariabelen

As ûnderdiel fan Bootstrap's evoluearjende oanpak fan CSS-fariabelen, brûke popovers no lokale CSS-fariabelen op .popoverfoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

  --#{$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 fariabelen

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

Gebrûk

Popovers ynskeakelje fia JavaScript:

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

Opsjes

As opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript, kinne jo in opsjenamme tafoegje oan data-bs-, lykas yn data-bs-animation="{value}". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan " camelCase " nei " kebab-case " as jo de opsjes trochjaan fia gegevensattributen. Brûk bygelyks data-bs-custom-class="beautifier"ynstee fan data-bs-customClass="beautifier".

Fanôf Bootstrap 5.2.0 stypje alle komponinten in eksperiminteel reservearre data-attribút data-bs-configdat ienfâldige komponintkonfiguraasje as in JSON-string kin herbergje. As in elemint hat data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"attributen, de definitive titlewearde sil wêze 456en de aparte gegevens attributen sille oerskriuwe wearden jûn op data-bs-config. Derneist kinne besteande gegevensattributen JSON-wearden lykas data-bs-delay='{"show":0,"hide":150}'.

Mei help fan funksje meipopperConfig

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

Metoaden

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

Eveneminten

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