5-day Mini-Course
Build UIs that don’t suck.
Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.
Popover
A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.
The <el-popover> component is used to display floating panels with arbitrary content — perfect for things like navigation menus and flyouts.
Component API
<el-popover>
Contains the content of the popover.
| Attributes | |
anchor | Where to position the popover. Supports values like "bottom", "bottom-start", "bottom-end", etc. |
anchor-strategy | Sets the position CSS property of the popover to eitherabsolute (default) or fixed. |
| Data attributes (Read-only) | |
data-closed | Present before transitioning in, and when transitioning out. |
data-enter | Present when transitioning in. |
data-leave | Present when transitioning out. |
data-transition | Present when transitioning in or out. |
| Events | |
toggle | Dispatched when the popover opens or closes. |
| Methods | |
togglePopover() | Toggles the popover visibility. |
showPopover() | Shows the popover. |
hidePopover() | Hides the popover. |
<el-popover-group>
Links related popovers to prevent them from closing when focus is moved between them.
<button>
A button that toggles the popover when clicked.
| ARIA attributes (Read-only) | |
aria-expanded | Set to "true" when the popover is open, "false" when closed. |
Examples
Basic example
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Toggling popovers
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Opening popovers
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Closing popovers
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Setting the panel width
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Positioning the panel
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Adding transitions
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Grouping related popovers
To view the complete documentation, you must own a Tailwind Plus license and be signed in.