Source

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.js fir positionéieren. Dir musst Popper.min.js virum bootstrap.js enthalen oder benotzen bootstrap.bundle.min.js/ bootstrap.bundle.jsdéi Popper.js enthält fir datt Popovers funktionnéieren!
  • Popovers erfuerderen den Tooltip Plugin als Ofhängegkeet.
  • Wann Dir eis JavaScript aus der Quell baut, brauchutil.js et .
  • 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 white-space: nowrap;op Är <a>s dëst Verhalen ze vermeiden.
  • Popovers musse verstoppt ginn ier hir entspriechend Elementer aus der DOM geläscht ginn.

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-toggleAttribut ze wielen:

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

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.

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

Beispill

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

Véier Richtungen

Véier Optiounen sinn verfügbar: uewen, riets, ënnen a lénks ausgeriicht.

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

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.

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

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>den pointer-eventsop de behënnerte Element iwwerschreiden.

Fir behënnerte Popover-Trigger, kënnt Dir och léiwer data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Benotzung

Aktivéiert Popovers iwwer JavaScript:

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

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-animation="".

Numm Typ Default Beschreiwung
Animatioun boolesch wouer Fëllt e CSS Fade Iwwergang op de Popover
Container streng | Element | falsch falsch

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.
Inhalt streng | Element | Funktioun ''

Default Inhalt Wäert wann data-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.
Retard 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 falsch Setzt HTML an de Popover. Wann falsch, gëtt d'JQuery textMethod benotzt fir Inhalt an d'DOM ze setzen. Benotzt Text wann Dir besuergt sidd iwwer XSS Attacken.
Placement streng | Funktioun 'riets'

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 éischt Argument an dem Ausléiserelement DOM Node als zweet genannt. De thisKontext ass op d'Popover Instanz gesat.
selector streng | falsch falsch 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 .
Schabloun String '<div class="popover" role="tooltip"><div class="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.

.arrowwäert de Pfeil vum Popover ginn.

Déi äusserst Wrapperelement soll d' .popoverKlass hunn.
Titel 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.
ausléisen String 'klickt' Wéi Popover ausgeléist gëtt - klickt | huel | fokusséieren | manuell. Dir kënnt verschidde Ausléiser passéieren; trennt se mat engem Raum. 'manuell' kann net mat engem aneren Ausléiser kombinéiert ginn.
offset Zuel | String 0 Offset vum Popover relativ zu sengem Zil. Fir méi Informatiounen, kuckt op Popper.js's Offset Docs .
fallbackPlacement streng | Array 'flippen' Erlaabt ze spezifizéieren wéi eng Positioun Popper op Fallback benotzt. Fir méi Informatioun kuckt op Popper.js Verhalensdokumenter
Grenz streng | element 'scrollParent' Iwwerschwemmungsgrenze vum Popover. Akzeptéiert d'Wäerter vun 'viewport', 'window', 'scrollParent'oder eng HTMLElement Referenz (nëmmen JavaScript). Fir méi Informatioun kuckt op Popper.js's preventOverflow Docs .

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.

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.

$().popover(options)

Initializes Popovers fir eng Element Kollektioun.

.popover('show')

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 null Längt sinn, ginn ni ugewisen.

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

.popover('hide')

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.

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

.popover('toggle')

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.

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

.popover('dispose')

Verstoppt an zerstéiert de Popover vun engem Element. Popovers déi Delegatioun benotzen (déi mat der selectorOptioun erstallt ginn ) kënnen net individuell op Nofolger Trigger Elementer zerstéiert ginn.

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

.popover('enable')

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

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

.popover('disable')

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

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

.popover('toggleEnabled')

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

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

.popover('update')

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

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

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. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})