Popovers

Dokumentasjon og eksempler for å legge til Bootstrap popovers, som de som finnes i iOS, til ethvert element på nettstedet ditt.

Oversikt

Ting å vite når du bruker popover-plugin:

• Popovers er avhengige av tredjepartsbiblioteket Popper.js for posisjonering. Du må inkludere popper.min.js før bootstrap.js eller bruke bootstrap.bundle.min.js/ bootstrap.bundle.jssom inneholder Popper.js for at popovers skal fungere!
• Popovers krever verktøytips-plugin som en avhengighet.
• Hvis du bygger JavaScript fra kilden, kreverutil.js det .
• Popovers er opt-in av ytelsesårsaker, så du må initialisere dem selv .
• Null-lengde titleog contentverdier vil aldri vise en popover.
• Spesifiser container: 'body'for å unngå å gjengi problemer i mer komplekse komponenter (som våre inndatagrupper, knappegrupper osv.).
• Å utløse popovers på skjulte elementer vil ikke fungere.
• Popovers for .disabledeller disabledelementer må utløses på et wrapper-element.
• Når de utløses fra ankere som går over flere linjer, vil popovers være sentrert mellom ankrenes totale bredde. Bruk .text-nowrappå din <a>s for å unngå denne oppførselen.
• Popovers må skjules før de tilhørende elementene er fjernet fra DOM.
• Popovers kan utløses takket være et element inne i en skygge-DOM.

Fortsett å lese for å se hvordan popovers fungerer med noen eksempler.

Eksempel: Aktiver popovers overalt

En måte å initialisere alle popovers på en side er å velge dem etter data-toggleattributtet deres:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Eksempel: Bruk av containeralternativet

Når du har noen stiler på et overordnet element som forstyrrer en popover, vil du spesifisere en egendefinert containerslik at popoverens HTML vises i det elementet i stedet.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Eksempel

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

Fire retninger

Fire alternativer er tilgjengelige: topp-, høyre-, bunn- og venstrejustert.

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

Avvis ved neste klikk

Bruk focustriggeren til å avvise popovers ved brukerens neste klikk på et annet element enn veksleelementet.

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

Deaktiverte elementer

Elementer med disabledattributtet er ikke interaktive, noe som betyr at brukere ikke kan holde musepekeren eller klikke på dem for å utløse en popover (eller verktøytips). Som en løsning vil du utløse popover fra en wrapper <div>eller <span>og overstyre pointer-eventspå det deaktiverte elementet.

For deaktiverte popover-utløsere foretrekker du kanskje også data-trigger="hover"at popover-en vises som umiddelbar visuell tilbakemelding til brukerne dine, da de kanskje ikke forventer å klikke på et deaktivert element.

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

Bruk

Aktiver popovers via JavaScript:

$('#example').popover(options)

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-animation="".

Metoder

$().popover(options)

Initialiserer popovers for en elementsamling.

.popover('show')

Avslører et elements popover. Går tilbake til den som ringer før popover-en faktisk har blitt vist (dvs. før shown.bs.popoverhendelsen inntreffer). Dette regnes som en "manuell" utløsning av popover. Popovers hvis både tittel og innhold har null lengde, vises aldri.

$('#element').popover('show')

.popover('hide')

Skjuler et elements popover. Går tilbake til den som ringer før popover faktisk har blitt skjult (dvs. før hidden.bs.popoverhendelsen inntreffer). Dette regnes som en "manuell" utløsning av popover.

$('#element').popover('hide')

.popover('toggle')

Veksler på et elements popover. Går tilbake til den som ringer før popover-en faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.popovereller hidden.bs.popoverinntreffer). Dette regnes som en "manuell" utløsning av popover.

$('#element').popover('toggle')

.popover('dispose')

Skjuler og ødelegger et elements popover. Popovers som bruker delegering (som opprettes ved hjelp av selectoralternativet ) kan ikke ødelegges individuelt på etterkommere triggerelementer.

$('#element').popover('dispose')

.popover('enable')

Gir et elements popover muligheten til å bli vist. Popovers er aktivert som standard.

$('#element').popover('enable')

.popover('disable')

Fjerner muligheten for at et elements popover skal vises. Popover vil kun kunne vises hvis den er aktivert på nytt.

$('#element').popover('disable')

.popover('toggleEnabled')

Veksler på muligheten for at et elements popover skal vises eller skjules.

$('#element').popover('toggleEnabled')

.popover('update')

Oppdaterer posisjonen til et elements popover.

$('#element').popover('update')

arrangementer

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})