Source: https://tailwindcss.com/plus/ui-blocks/documentation/popover

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Getting started

  • Getting set up

  • Using HTML

  • Using React

  • Using Vue

  • Assets

• Elements

  • Introduction

  • Autocomplete

  • Command palette

  • Dialog

  • Disclosure

  • Dropdown menu

  • Popover

  • Select

  • Tabs

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.

Get the free course

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.

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 .