Bootstrap JS Popover
JS Popover
De component Popover is vergelijkbaar met tooltips; het is een pop-upvenster dat verschijnt wanneer de gebruiker op een element klikt. Het verschil is dat de popover veel meer inhoud kan bevatten.
Voor een tutorial over Popovers, lees onze Bootstrap Popover Tutorial .
Inschakelen via data-* Attributen
Het data-toggle="popover"activeert de popover.
Het titleattribuut specificeert de koptekst van de popover.
Het data-contentattribuut specificeert de tekst die moet worden weergegeven in de hoofdtekst van de popover.
Voorbeeld
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
Via JavaScript
Popovers zijn geen CSS-only plug-ins en moeten daarom worden geïnitialiseerd met jQuery: selecteer het opgegeven element en roep de
popover()methode aan.
Voorbeeld
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
Popover-opties
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voor gegevensattributen voegt u de optienaam toe aan data-, zoals in data-placement="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when opening and closing the popover
|
|
| container | string, or the boolean false | false | Appends the popover to a specific element. Example: container: 'body' |
|
| content | string | "" | Specifies the text inside the popover's body | |
| delay | number, or object | 0 | Specifies the number of milliseconds it will take to open and close the popover. To specify a delay for opening and another one for closing, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it |
|
| html | boolean | false | Specifies whether to accept HTML tags in the popover:
When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks |
|
| placement | string | "right" | Specifies the popover position. Possible values:
|
|
| selector | string, or the boolean false | false | Adds the popover to a specified selector | |
| template | string | Base HTML to use when creating the popover. The popover's title will be injected into the .popover-header. The popover's content will be injected into the .popover-body. .arrow will become the popover's arrow. The outermost wrapper element should have the .popover class. |
||
| title | string | "" | Specifies the header text of the popover | |
| trigger | string | "click" | Specifies how the popover is triggered. Possible values:
|
|
| offset | number or a string | 0 | Offset of the popover relative to its target | |
| fallbackPlacement | string or an aray | "flip" | Specifies which position Popper wil use on fallback | |
| boundary | string or element | "scrollParent" | Overflow constraint boundary of the popover. Accepts the values "viewport", "window" or "scrollParent", or an HTML element |
Popover-methoden
De volgende tabel bevat alle beschikbare popover-methoden.
| Method | Description | Try it |
|---|---|---|
| .popover(options) | Activates the popover with an option. See options above for valid values | |
| .popover("show") | Shows the popover | |
| .popover("hide") | Hides the popover | |
| .popover("toggle") | Toggles the popover | |
| .popover("dispose") | Hides and destroys the popover | |
| .popover("enable") | Enables the popover the ability to be shown. This is default | |
| .popover("disable") | Removes the ability to show a popover. The popover can only be shown if it is re-enabled again | |
| .popover("toggleEnabled") | Toggles the ability for the popover to be shown or hidden | |
| .popover("update") | Updates the position of the popover |
Popover-evenementen
In de volgende tabel worden alle beschikbare popover-gebeurtenissen weergegeven.
| Event | Description | Try it |
|---|---|---|
| show.bs.popover | Occurs when the popover is about to be shown | |
| shown.bs.popover | Occurs when the popover is fully shown (after CSS transitions have completed) | |
| hide.bs.popover | Occurs when the popover is about to be hidden | |
| hidden.bs.popover | Occurs when the popover is fully hidden (after CSS transitions have completed) | |
| inserted.bs.popover | Occurs after the show.bs.popover event when the popover template has been added to the DOM |