Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
in English

Popovers

Dokumentatioun an Beispiller fir Bootstrap Popovers ze addéieren, wéi déi am iOS fonnt ginn, op all Element op Ärem Site.

Iwwersiicht

Saachen ze wëssen wann Dir de Popover Plugin benotzt:

  • Popovers vertrauen op der 3. Partei Bibliothéik Popper fir positionéieren. Dir musst popper.min.js virum bootstrap.js enthalen oder benotzen bootstrap.bundle.min.js/ bootstrap.bundle.jsdéi Popper enthält fir datt Popovers funktionnéieren!
  • Popovers erfuerderen den Tooltip Plugin als Ofhängegkeet.
  • Popovers sinn opt-in aus Leeschtungsgrënn, also musst Dir se selwer initialiséieren .
  • Null-Längt titlea contentWäerter wäert weisen ni eng Popover.
  • Spezifizéieren container: 'body'fir Rendering Probleemer a méi komplexe Komponenten ze vermeiden (wéi eis Inputgruppen, Knäppchengruppen, etc.).
  • Ausléiser Popovers op verstoppt Elementer wäert net schaffen.
  • Popovers fir .disabledoder disabledElementer muss op engem wrapper Element ausgeléist ginn.
  • Wann aus Anker ausgeléist gëtt, déi iwwer verschidde Linnen wéckelen, ginn Popovers tëscht den Gesamtbreet vun den Anker zentréiert. Benotzt .text-nowrapop Är <a>s dëst Verhalen ze vermeiden.
  • Popovers musse verstoppt ginn ier hir entspriechend Elementer aus der DOM geläscht ginn.
  • Popovers kënnen ausgeléist ginn duerch en Element an engem Schied DOM.
Par défaut benotzt dës Komponent den agebauten Inhalt Sanitizer, deen all HTML Elementer ausstreift déi net explizit erlaabt sinn. Kuckt de Sanitizer Sektioun an eiser JavaScript Dokumentatioun fir méi Detailer.
Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro of. Kuckt d' Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .

Weiderliesen fir ze kucken wéi Popovers mat e puer Beispiller funktionnéieren.

Beispill: Aktivéiert Popovers iwwerall

Ee Wee fir all Popovers op enger Säit ze initialiséieren wier se no hirem data-bs-toggleAttribut ze wielen:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Beispill: Benotzt d' containerOptioun

Wann Dir e puer Stiler op engem Elterendeel hutt, déi mat engem Popover stéieren, wëllt Dir e Benotzerdefinéiert spezifizéieren, containerfir datt den HTML vum Popover an deem Element amplaz erschéngt.

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

Beispill

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Véier Richtungen

Véier Optiounen sinn verfügbar: uewen, riets, ënnen a lénks ausgeriicht. D'Richtunge gi gespigelt wann Dir Bootstrap an RTL benotzt.

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

Entlooss beim nächste Klick

Benotzt den focusAusléiser fir Popovers op de nächste Klick vum Benotzer vun engem aneren Element ze entloossen wéi de Toggle Element.

Spezifesch Markup erfuerderlech fir entlooss-op-nächste-klickt

Fir richteg Cross-Browser a Cross-Plattform Verhalen, musst Dir den <a>Tag benotzen, net den <button>Tag, an Dir musst och en tabindexAttribut enthalen.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

Behënnert Elementer

Elementer mat dem disabledAttribut sinn net interaktiv, dat heescht datt d'Benotzer net kënnen hover oder klicken fir e Popover (oder Tooltip) auszeléisen. Als Léisung wëllt Dir de Popover aus engem Wrapper ausléisen <div>oder <span>, am Idealfall gemaach Keyboard-fokusséierbar mat tabindex="0".

Fir behënnert Popover Ausléiser, kënnt Dir och léiwer data-bs-trigger="hover focus"sou datt de Popover als direkt visuell Feedback fir Är Benotzer erschéngt, well se net erwaarden datt se op en behënnert Element klickt .

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

Sass

Variablen

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$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;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Benotzung

Aktivéiert Popovers iwwer JavaScript:

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

Popovers maachen fir Tastatur an Hëllefstechnologie Benotzer ze schaffen

Fir Tastaturbenotzer z'erméiglechen Är Popovers z'aktivéieren, sollt Dir se nëmmen un HTML Elementer addéieren, déi traditionell Tastaturfokusséierbar an interaktiv sinn (wéi Linken oder Form Kontrollen). Och wann arbiträr HTML Elementer (wéi <span>s) fokusséierbar gemaach kënne ginn andeems d' tabindex="0"Attribut bäigefüügt gëtt, wäert dëst potenziell lästeg a konfus Tabstops op net-interaktiven Elementer fir Tastatur Benotzer addéieren, an déi meescht Assistenztechnologien annoncéieren de Moment net den Inhalt vum Popover an dëser Situatioun. . Zousätzlech, vertrau net eleng op hoverden Ausléiser fir Är Popovers, well dëst wäert se onméiglech maachen fir Tastatur Benotzer auszeléisen.

Iwwerdeems Dir räich, strukturéiert HTML an Popovers mat der htmlOptioun aginn kënnt, empfeelen mir Iech staark ze vermeiden datt Dir eng exzessiv Quantitéit un Inhalt derbäigesat. De Wee wéi Popovers momentan funktionnéieren ass datt, eemol ugewisen, hiren Inhalt un den Ausléiserelement mam aria-describedbyAttribut gebonnen ass. Als Resultat gëtt de ganzen Inhalt vum Popover fir Hëllefstechnologie Benotzer als ee laangen, onënnerbrach Stream ugekënnegt.

Zousätzlech, och wann et méiglech ass och interaktiv Kontrollen (wéi Formelementer oder Linken) an Ärem Popover ze enthalen (duerch datt Dir dës Elementer un de allowListvun erlaabten Attributer an Tags bäidréit), bewosst datt de Moment de Popover keng Tastaturfokusuerdnung verwaltet. Wann e Keyboard Benotzer e Popover opmaacht, bleift de Fokus op dat ausléisend Element, a well de Popover normalerweis net direkt den Ausléiser an der Struktur vum Dokument verfollegt, gëtt et keng Garantie datt no vir/drécktTABwäert e Keyboard Benotzer an de Popover selwer réckelen. Kuerz gesot, einfach interaktiv Kontrollen op e Popover ze addéieren ass méiglecherweis dës Kontrollen onerreechbar / onbrauchbar fir Tastaturbenotzer a Benotzer vun Assistenztechnologien, oder op d'mannst fir eng onlogesch Gesamtkonzentratiounsuerdnung. An dëse Fäll, betruecht amplaz e modalen Dialog ze benotzen.

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-bs-, wéi an data-bs-animation="". Vergewëssert Iech de Falltyp vun der Optiounsnumm vun CamelCase op Kebab-Case z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill, amplaz ze benotzen data-bs-customClass="beautifier", benotzt data-bs-custom-class="beautifier".

Bedenkt datt aus Sécherheetsgrënn d' sanitize, sanitizeFn, an d' allowListOptiounen net mat Datenattributer geliwwert kënne ginn.
Numm Typ Default Beschreiwung
animation boolesch true Fëllt e CSS Fade Iwwergang op de Popover
container streng | Element | falsch false

Fügt de Popover op e spezifescht Element. Beispill container: 'body':. Dës Optioun ass besonnesch nëtzlech well et Iech erlaabt de Popover am Flux vum Dokument no beim Ausléiserelement ze positionéieren - wat verhënnert datt de Popover vum Ausléiserelement wärend enger Fënstergréisst schwëmmt.

content streng | Element | Funktioun ''

Default Inhalt Wäert wann data-bs-contentAttributer net präsent ass.

Wann eng Funktioun gëtt, gëtt se genannt mat senger thisReferenz op d'Element, op deem de Popover verbonnen ass.

delay Zuel | Objet 0

Verzögerung weist a verstoppt de Popover (ms) - gëllt net fir manuell Ausléisertyp

Wann eng Zuel geliwwert gëtt, gëtt Verspéidung fir béid verstoppen / weisen applizéiert

Objektstruktur ass:delay: { "show": 500, "hide": 100 }

html boolesch false Setzt HTML an de Popover. Wann falsch, gëtt innerTextd'Eegeschafte benotzt fir Inhalt an d'DOM ze setzen. Benotzt Text wann Dir Iech Suergen iwwer XSS Attacken hutt.
placement streng | Funktioun 'right'

Wéi positionéiert de Popover - Auto | erop | ënnen | lénks | riets.
Wann autospezifizéiert ass, wäert et dynamesch reorientéieren de Popover.

Wann eng Funktioun benotzt gëtt fir d'Placement ze bestëmmen, gëtt se mam Popover DOM Node als säin éischten Argument an dem ausléisende Element DOM Node als zweet genannt. De thisKontext ass op d'Popover Instanz gesat.

selector streng | falsch false Wann e Selektor zur Verfügung gestallt gëtt, ginn Popover-Objeten op déi spezifizéiert Ziler delegéiert. An der Praxis gëtt dëst benotzt fir dynamesch HTML Inhalt z'erméiglechen fir Popovers derbäi ze hunn. Kuckt dëst an en informativt Beispill .
template String '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML fir ze benotzen wann Dir de Popover erstellt.

D'Popover titlegëtt an de .popover-header.

D'Popover contentgëtt an de .popover-body.

.popover-arrowwäert de Pfeil vum Popover ginn.

Déi äusserst Wrapperelement soll d' .popoverKlass hunn.

title streng | Element | Funktioun ''

Standard Titelwäert wann titleAttribut net präsent ass.

Wann eng Funktioun gëtt, gëtt se genannt mat senger thisReferenz op d'Element, op deem de Popover verbonnen ass.

trigger String 'click' Wéi Popover ausgeléist gëtt - klickt | huel | konzentréieren | manuell. Dir kënnt verschidde Ausléiser passéieren; trennt se mat engem Raum. manualkann net mat all aner Ausléiser kombinéiert ginn.
fallbackPlacements Array ['top', 'right', 'bottom', 'left'] Definéiert Fallbackplacementer andeems Dir eng Lëscht vu Placementer an der Array ubitt (an der Preferenzuerdnung). Fir méi Informatioun, kuckt op dem Popper seng Verhalensdokumenter
boundary streng | element 'clippingParents' Iwwerschwemmungsgrenze vun der Popover (gëllt nëmme fir Popper's preventOverflow-Modifier). Par défaut ass et 'clippingParents'a kann eng HTMLElement Referenz akzeptéieren (nëmmen iwwer JavaScript). Fir méi Informatioun kuckt op Popper's detectOverflow docs .
customClass streng | Funktioun ''

Füügt Klassen op de Popover wann et gewise gëtt. Bedenkt datt dës Klassen zousätzlech zu all Klassen, déi an der Schabloun uginn sinn, bäigefüügt ginn. Fir méi Klassen ze addéieren, trennt se mat Plazen 'class-1 class-2':.

Dir kënnt och eng Funktioun weiderginn, déi eng eenzeg String mat zousätzlech Klassennimm zréckginn soll.

sanitize boolesch true Aktivéiert oder deaktivéiert d'Sanéierung. Wann aktivéiert 'template', 'content'an d' 'title'Optioune ginn desinfizéiert. Kuckt de Sanitizer Sektioun an eiser JavaScript Dokumentatioun .
allowList Objet Default Wäert Objet deen erlaabt Attributer an Tags enthält
sanitizeFn null | Funktioun null Hei kënnt Dir Är eege Sanitärfunktioun ubidden. Dëst kann nëtzlech sinn wann Dir léiwer eng speziell Bibliothéik benotze fir Sanéierung ze maachen.
offset array | streng | Funktioun [0, 8]

Offset vum Popover relativ zu sengem Zil. Dir kënnt eng String an Datenattributer mat komma getrennte Wäerter passéieren wéi:data-bs-offset="10,20"

Wann eng Funktioun benotzt gëtt fir d'Offset ze bestëmmen, gëtt se mat engem Objet genannt deen d'Popper Placement enthält, d'Referenz a Popper Rects als säin éischten Argument. Den Ausléiserelement DOM Node gëtt als zweet Argument weidergeleet. D'Funktioun muss eng Array mat zwou Zuelen zréckginn :.[skidding, distance]

Fir méi Informatioun kuckt op dem Popper seng Offset Docs .

popperConfig null | Objet | Funktioun null

Fir d'Standard Popper Configuratioun vum Bootstrap z'änneren, kuckt d' Popper Konfiguratioun .

Wann eng Funktioun benotzt gëtt fir d'Popper Konfiguratioun ze kreéieren, gëtt se mat engem Objet genannt deen d'Standard Popper Konfiguratioun vum Bootstrap enthält. Et hëlleft Iech de Standard mat Ärer eegener Konfiguratioun ze benotzen an ze fusionéieren. D'Funktioun muss e Configuratiounsobjekt fir Popper zréckginn.

Donnéeën Attributer fir eenzel popovers

Optiounen fir eenzel popovers kann alternativ duerch d'Benotzung vun Daten Attributer uginn ginn, wéi uewen erkläert.

Benotzt Funktioun matpopperConfig

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

Methoden

Asynchron Methoden an Iwwergäng

All API Methoden sinn asynchron a starten en Iwwergang . Si ginn zréck op den Uruffer soubal den Iwwergang ugefaang ass, awer ier en eriwwer ass . Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .

Kuckt eis JavaScript Dokumentatioun fir méi Informatioun .

weisen

Enthüllt de Popover vun engem Element. Gitt zréck op den Uruffer ier de Popover tatsächlech gewisen gouf (dh ier d' shown.bs.popoverEvenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Popover ugesinn. Popovers deenen hiren Titel an den Inhalt souwuel null Längt sinn, ginn ni ugewisen.

myPopover.show()

verstoppen

Verstoppt de Popover vun engem Element. Zréck op den Uruffer ier de Popover tatsächlech verstoppt gouf (dh ier d' hidden.bs.popoverEvenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Popover ugesinn.

myPopover.hide()

wiesselen

Wiesselt de Popover vun engem Element. Zréck op den Uruffer ier de Popover tatsächlech gewisen oder verstoppt goufshown.bs.popover ( dh ier den hidden.bs.popoverEvent geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Popover ugesinn.

myPopover.toggle()

entsuergen

Verstoppt an zerstéiert de Popover vun engem Element (läscht gespäichert Daten am DOM-Element). Popovers déi Delegatioun benotzen (déi mat der selectorOptioun erstallt ginn ) kënnen net individuell op Nofolger Trigger Elementer zerstéiert ginn.

myPopover.dispose()

aktivéieren

Gëtt dem Popover vun engem Element d'Méiglechkeet ze weisen. Popovers sinn als Standard aktivéiert.

myPopover.enable()

auszeschalten

Entfernt d'Fäegkeet fir de Popover vun engem Element ze weisen. De Popover kann nëmme gewise ginn wann et nei ageschalt ass.

myPopover.disable()

toggleEnabled

Wiesselt d'Fäegkeet fir de Popover vun engem Element ze weisen oder ze verstoppen.

myPopover.toggleEnabled()

update

Aktualiséiert d'Positioun vum Popover vun engem Element.

myPopover.update()

getInstanz

Statesch Method déi Iech erlaabt d'Popover Instanz mat engem DOM Element assoziéiert ze kréien

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Statesch Method déi Iech erlaabt d'Popover Instanz mat engem DOM Element assoziéiert ze kréien, oder eng nei ze kreéieren am Fall wou se net initialiséiert gouf

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Evenementer

Event Typ Beschreiwung
show.bs.popover Dëst Event brennt direkt wann d' showInstanzmethod genannt gëtt.
gewisen.bs.popover Dëst Evenement gëtt ausgeléist wann de Popover fir de Benotzer siichtbar gemaach gouf (waart bis CSS Iwwergäng fäerdeg sinn).
hide.bs.popover Dëst Evenement gëtt direkt gebrannt wann d' hideInstanzmethod genannt gouf.
hidden.bs.popover Dëst Evenement gëtt ofgeléist wann de Popover fäerdeg ass vum Benotzer verstoppt ze ginn (waart op CSS Iwwergäng fir fäerdeg ze sinn).
agebaut.bs.popover Dëst Evenement gëtt nom show.bs.popoverEvent ofgeschaaft wann d'Popover Schabloun un d'DOM bäigefüügt gouf.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})