Popovers

Översikt

Saker att veta när du använder popover-plugin:

• Popovers förlitar sig på tredje parts bibliotek Popper för positionering. Du måste inkludera popper.min.js före bootstrap.js, eller använda en bootstrap.bundle.min.jssom innehåller Popper.
• Popovers kräver popover-plugin som ett beroende.
• Popovers är opt-in av prestandaskäl, så du måste initiera dem själv .
• Nolllängd titleoch contentvärden kommer aldrig att visa en popover.
• Ange container: 'body'för att undvika att problem återges i mer komplexa komponenter (som våra indatagrupper, knappgrupper, etc).
• Att utlösa popovers på dolda element kommer inte att fungera.
• Popovers för .disabledeller disabledelement måste utlösas på ett omslagselement.
• När de utlöses från ankare som lindas över flera linjer, kommer popovers att centreras mellan ankarnas totala bredd. Använd .text-nowrappå din <a>s för att undvika detta beteende.
• Popovers måste döljas innan deras motsvarande element har tagits bort från DOM.
• Popovers kan utlösas tack vare ett element inuti en skugga DOM.

Fortsätt läsa för att se hur popovers fungerar med några exempel.

Exempel

Aktivera popovers

Som nämnts ovan måste du initiera popovers innan de kan användas. Ett sätt att initiera alla popovers på en sida skulle vara att välja dem efter deras data-bs-toggleattribut, som så:

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

Live-demo

Vi använder JavaScript som liknar kodavsnittet ovan för att rendera följande live popover. Titlar ställs in via data-bs-titleoch kroppsinnehåll ställs in via 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>

Fyra riktningar

Fyra alternativ är tillgängliga: topp, höger, botten och vänster. Vägbeskrivningarna speglas när du använder Bootstrap i RTL. Ställ data-bs-placementin för att ändra riktning.

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

Beställningscontainer

När du har några stilar på ett överordnat element som stör en popover, vill du ange en anpassad containerså att popoverens HTML visas i det elementet istället. Detta är vanligt i responsiva tabeller, inmatningsgrupper och liknande.

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

En annan situation där du vill ställa in en explicit anpassad containerär popovers i en modal dialogruta , för att se till att själva popoveren läggs till modalen. Detta är särskilt viktigt för popovers som innehåller interaktiva element – ​​modala dialoger kommer att fånga fokus, så om inte popoveren är ett underordnat element till modalen, kommer användare inte att kunna fokusera eller aktivera dessa interaktiva element.

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

Anpassade popovers

Du kan anpassa utseendet på popovers med hjälp av CSS-variabler . Vi ställer in en anpassad klass med data-bs-custom-class="custom-popover"för att omfånga vårt anpassade utseende och använder den för att åsidosätta några av de lokala CSS-variablerna.

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

Stäng vid nästa klick

Använd focustriggern för att ta bort popovers vid nästa klick på ett annat element än växlingselementet.

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

Inaktiverade element

Element med disabledattributet är inte interaktiva, vilket innebär att användare inte kan hålla muspekaren eller klicka på dem för att utlösa en popover (eller verktygstips). Som en lösning bör du trigga popover från ett omslag <div>eller <span>, idealiskt gjort tangentbordsfokuserbart med tabindex="0".

För inaktiverade popover-utlösare kanske du också föredrar data-bs-trigger="hover focus"att popover-fönstret visas som omedelbar visuell feedback till dina användare eftersom de kanske inte förväntar sig att klicka på ett inaktiverat element.

<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

Variabler

Som en del av Bootstraps utvecklande CSS-variabler använder popovers nu lokala CSS-variabler .popoverför förbättrad realtidsanpassning. Värden för CSS-variablerna ställs in via Sass, så Sass-anpassning stöds fortfarande också.

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

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

Användande

Aktivera popovers via JavaScript:

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

alternativ

Eftersom alternativ kan skickas via dataattribut eller JavaScript kan du lägga till ett alternativnamn till data-bs-, som i data-bs-animation="{value}". Se till att ändra fallets typ av alternativnamnet från " camelCase " till " kebab-case " när du skickar alternativen via dataattribut. Använd till exempel data-bs-custom-class="beautifier"istället för data-bs-customClass="beautifier".

Från och med Bootstrap 5.2.0 stöder alla komponenter ett experimentellt reserverat dataattribut data-bs-configsom kan hysa enkel komponentkonfiguration som en JSON-sträng. När ett element har data-bs-config='{"delay":0, "title":123}'och data-bs-title="456"attribut kommer det slutliga titlevärdet att vara 456och de separata dataattributen kommer att åsidosätta värden som ges på data-bs-config. Dessutom kan befintliga dataattribut innehålla JSON-värden som data-bs-delay='{"show":0,"hide":150}'.

Använder funktion medpopperConfig

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

Metoder

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

evenemang

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