Popover
The popover object documents the native HTML element and attribute based API for popovers.
The examples below use normal elements and attributes such as popovertarget, popovertargetaction, popover, and the styleguide placement attributes.
Basic native popover
A normal button that toggles a popover element by id.
Click on the trigger to show the popover.
This is a popover.
Supported trigger actions
Buttons can explicitly show, hide, or toggle the same popover using `popovertargetaction`.
This example shows the supported native trigger actions for popovers.
This popover is controlled by native attributes.
Popover with backdrop
Adds a backdrop behind the popover content.
This example shows a popover with a backdrop behind it.
This popover has a backdrop.
Relative placement
Positions the popover relative to its trigger instead of the viewport.
This example positions the popover relative to the trigger.
This popover is placed relative to the trigger.
Viewport placement
Uses the placement attributes relative to the viewport when `data-js-popover-relative-to-trigger` is not set.
This example uses viewport-based placement.
This popover is placed relative to the viewport.
Parameters (Blade)
| Key | Default value | Type | Available values | Description |
|---|---|---|---|---|
|
popovertarget
|
Connects a trigger button to a popover by id. | string | Any element with a matching id can be used as a popover target | - |
|
popovertargetaction
|
Controls whether the trigger toggles, shows, or hides the popover. | string | - | - |
|
popover
|
Marks the element as a popover. | string | - | - |
|
data-js-popover-relative-to-trigger
|
Optional. Set to `true` to position the popover relative to its trigger instead of the viewport. | string | - | - |
|
data-js-popover-horizontal-placement
|
Optional. Sets horizontal placement to `left`, `center`, or `right`. | string | - | - |
|
data-js-popover-vertical-placement
|
Optional. Sets vertical placement to `top`, `center`, or `bottom`. | string | - | - |
|
data-popover-backdrop
|
Optional. Adds a backdrop behind the popover. | string | - | - |
|
id
|
string | - | The DOM id of the component. | |
|
classList
|
[] | array | - | Array containing wrapping classes array |
|
attributeList
|
[] | array | - | Array containing keys and values rendered as attributes |