Popovers

Dokumentation og eksempler på tilføjelse af Bootstrap popovers, som dem der findes i iOS, til ethvert element på dit websted.

Oversigt

Ting at vide, når du bruger popover-plugin:

• Popovers er afhængige af 3. parts bibliotek Popper til positionering. Du skal inkludere popper.min.js før bootstrap.js eller bruge bootstrap.bundle.min.js/ bootstrap.bundle.jssom indeholder Popper for at popovers kan virke!
• Popovers kræver værktøjstip-plugin som en afhængighed.
• Hvis du bygger vores JavaScript fra kilden, kræverutil.js det .
• Popovers er opt-in af præstationsmæssige årsager, så du skal selv initialisere dem .
• Nul-længde titleog contentværdier vil aldrig vise en popover.
• Angiv container: 'body'for at undgå gengivelse af problemer i mere komplekse komponenter (såsom vores inputgrupper, knapgrupper osv.).
• At udløse popovers på skjulte elementer vil ikke fungere.
• Popovers for .disabledeller disabledelementer skal udløses på et indpakningselement.
• Når de udløses fra ankre, der ombrydes over flere linjer, vil popovers blive centreret mellem ankrenes samlede bredde. Brug .text-nowrappå dine <a>s for at undgå denne adfærd.
• Popovers skal skjules, før deres tilsvarende elementer er blevet fjernet fra DOM.
• Popovers kan udløses takket være et element inde i en skygge-DOM.

Fortsæt med at læse for at se, hvordan popovers fungerer med nogle eksempler.

Eksempel: Aktiver popovers overalt

En måde at initialisere alle popovers på en side ville være at vælge dem efter deres data-toggleegenskab:

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

Eksempel: Brug af containermuligheden

Når du har nogle typografier på et overordnet element, der forstyrrer en popover, vil du gerne specificere en brugerdefineret container, så popoverens HTML vises i dette element 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 muligheder er tilgængelige: top-, højre-, bund- og venstrejusteret.

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

Afvis ved næste klik

Brug focustriggeren til at afvise popovers ved brugerens næste klik på et andet element end til/fra-elementet.

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

Deaktiverede elementer

Elementer med disabledattributten er ikke interaktive, hvilket betyder, at brugere ikke kan svæve eller klikke på dem for at udløse en popover (eller værktøjstip). Som en løsning vil du udløse popover fra en wrapper <div>eller <span>og tilsidesætte pointer-eventsdet deaktiverede element.

For deaktiverede popover-udløsere foretrækker du måske også data-trigger="hover", at popover-vinduet vises som øjeblikkelig visuel feedback til dine brugere, da de måske ikke forventer at klikke på et deaktiveret 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>

Brug

Aktiver popovers via JavaScript:

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

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-animation="".

Metoder

$().popover(options)

Initialiserer popovers for en elementsamling.

.popover('show')

Afslører et elements popover. Vender tilbage til den, der ringer, før popover-vinduet rent faktisk er blevet vist (dvs. før shown.bs.popoverhændelsen indtræffer). Dette betragtes som en "manuel" udløsning af popover. Popovers, hvis titel og indhold begge er nul-længde, vises aldrig.

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

.popover('hide')

Skjuler et elements popover. Vender tilbage til den, der ringer, før popover faktisk er blevet skjult (dvs. før hidden.bs.popoverhændelsen indtræffer). Dette betragtes som en "manuel" udløsning af popover.

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

.popover('toggle')

Skifter et elements popover. Vender tilbage til den, der ringer, før pop-over faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.popovereller hidden.bs.popoverindtræffer). Dette betragtes som en "manuel" udløsning af popover.

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

.popover('dispose')

Skjuler og ødelægger et elements popover. Popovers, der bruger delegering (som oprettes ved hjælp af selectormuligheden ), kan ikke individuelt destrueres på descendant trigger-elementer.

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

.popover('enable')

Giver et elements popover mulighed for at blive vist. Popovers er aktiveret som standard.

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

.popover('disable')

Fjerner muligheden for, at et elements popover vises. Popover vil kun kunne vises, hvis det er genaktiveret.

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

.popover('toggleEnabled')

Skifter muligheden for, at et elements popover vises eller skjules.

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

.popover('update')

Opdaterer placeringen af ​​et elements popover.

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

Begivenheder

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