JS Popover (popover.js)
Das Popover Plugin ist ähnlich wie Tooltips; es ist ein Pop-up-Fenster, das erscheint, wenn der Benutzer auf ein Element klickt. Der Unterschied ist , dass die popover viel mehr Inhalt enthalten kann.
Plugin - Abhängigkeit: Popovers erfordern den Tooltip - Plugin (tooltip.js) in Ihrer Version von einbezogen werden Bootstrap .
Ein Tutorial über Popovers , unsere lesen Bootstrap Popover Tutorial .
Via data-* Attribute
Die data-toggle="popover" aktiviert die popover .
Der title Attribut gibt den Kopftext des popover .
Die data-content - Attribut gibt den Text an, die innerhalb der angezeigt werden soll popover's Körpers.
Beispiel
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
Versuch es selber " Via JavaScript
Popovers sind nicht CSS-only - Plugins und müssen daher mit jQuery initialisiert werden: das angegebene Element wählen und den Anruf popover() Methode.
Beispiel
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
Versuch es selber " Popover Optionen
Die Optionen können über Datenattribute oder JavaScript übergeben werden. Die Option Namen für Datenattribute, hängen Sie data- , wie in data-placement="" .
| Name | Art | Standard | Beschreibung | Versuch es |
|---|---|---|---|---|
| animation | boolean | true | Gibt an, ob eine CSS - Fade Übergangseffekt hinzugefügt , wenn das Öffnen und Schließen popover
| Versuch es |
| container | string, or the boolean false | false | Hängt die popover auf ein bestimmtes Element. Beispiel: Behälter: 'body' | Versuch es |
| content | string | "" | Gibt den Text innerhalb des popover's body | Versuch es |
| delay | number, or object | 0 | Gibt die Anzahl der Millisekunden dauert , um es zu öffnen und die enge popover . Um eine Verzögerung zum Öffnen angeben und eine weitere für das Schließen, verwenden Sie die Objektstruktur: delay: {show: 500, hide: 100} - die 500 ms dauern wird , die zu öffnen popover , aber nur 100 ms um es zu schließen | Versuch es |
| html | boolean | false | Gibt an, ob HTML - Tags in der zu akzeptieren popover :
Wenn auf false gesetzt (Standard), jQuery text() Methode verwendet wird. Verwenden Sie diese Option, wenn Sie über XSS-Angriffe sind besorgt | Versuch es |
| placement | string | "right" | Gibt die popover Position. Mögliche Werte:
| Versuch es |
| selector | string, or the boolean false | false | Fügt die popover zu einem festgelegten Selektor | Versuch es |
| template | string | Base-HTML zu verwenden, wenn die popover zu schaffen. Die popover's Titel wird in die .popover-Titel injiziert werden. Die popover's Inhalte werden in den .popover-Gehalt injiziert werden. .arrow wird das geworden popover's Pfeil. Die äußerste Hüllenelement sollte die haben .popover Klasse. | ||
| title | string | "" | Gibt den Kopftext des popover | Versuch es |
| trigger | string | "click" | Gibt an, wie die popover ausgelöst wird. Mögliche Werte:
| Versuch es |
| viewport | string, or object | {selector: "body", padding: 0} | Hält die popover innerhalb der Grenzen dieses Elements. Beispiel: viewport: '#viewport' oder {selector: '#viewport', padding: 0} |
Popover Methoden
Die folgende Tabelle listet alle verfügbaren popover Methoden.
| Methode | Beschreibung | Versuch es |
|---|---|---|
| .popover( options ) | Aktiviert die popover mit einer Option. Siehe oben stehenden Optionen für gültige Werte | Versuch es |
| .popover("show") | Zeigt die popover | Versuch es |
| .popover("hide") | Blendet die popover | Versuch es |
| .popover("toggle") | Blendet die popover | Versuch es |
| .popover("destroy") | Versteckt und zerstört die popover | Versuch es |
Popover Veranstaltungen
Die folgende Tabelle listet alle verfügbaren popover Veranstaltungen.
| Event | Beschreibung | Versuch es |
|---|---|---|
| show.bs.popover | Tritt ein, wenn die popover über gezeigt werden soll | Versuch es |
| shown.bs.popover | Tritt ein, wenn der popover vollständig angezeigt wird (nach dem CSS - Übergänge abgeschlossen haben) | Versuch es |
| hide.bs.popover | Tritt ein, wenn die popover etwa ist versteckt werden | Versuch es |
| hidden.bs.popover | Tritt ein, wenn die popover vollständig verborgen ist (nachdem CSS - Übergänge abgeschlossen haben) | Versuch es |
Beispiele
Benutzerdefinierte Popover Entwurf
Verwenden Sie CSS das Aussehen des anpassen popover :
Beispiel
/* Popover */
.popover {
border: 2px dotted
red;
}
/* Popover Header */
.popover-title {
background-color:
#73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* Popover
Body */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* Popover Arrow */
.arrow {
border-right-color: red !important;
} Versuch es selber "