a-popover

Lit

Label

Content

Implemented with Popover.

Popover

A popover element. It positions itself relative to the trigger element using Floating UI, a-portal and a-blur for focus management.

Example

---

<a-popover>
  <div>Content</div>
</a-popover>

Methods

---

Show ↴ ↶

Popover.hide()

src/Popover.ts:169

Hide the popover.

Popover.show()

src/Popover.ts:123

Show the popover.

PopoverTrigger

A wrapper element that shows content when the user clicks with the slotted input element.

Example

---

<a-popover-trigger>
  <button type="button" slot="trigger">
    Label
  </button>

  <a-popover>
    <div>Content</div>
  </a-popover>
</a-popover>

Attributes

---

Name	Type	Default value	Description
opened	boolean	false	Wether the content is shown or not.

Methods

---

Show ↴ ↶

PopoverTrigger.close()

src/Popover.ts:284

Closes the inner popover.

PopoverTrigger.show()

src/Popover.ts:270

Show the inner popover.

PopoverTrigger.toggle()

src/Popover.ts:298

Toggles the inner popover.