Moon liveview storybook Moon Liveview Storybook

Popover

Website
Moon Design System Website
HEX
View package HEX
GitHub
View repository GitHub
Attribute Type Documentation Default Value
Required id * :string

ID of the component
class :string

Class which is applied to the popover content dialog
""
side :string

Vertical side of the Popover
"bottom"
align :string

Horizontal alignment of the Popover
"left"
on_close :string

On Close JS callback
""
initial_state :string

Initial state of the Popover
"hidden"
popover_target :string

Popover default target element ID, this will be used when initial_state is visible
rest :global

Other attributes of the Popover
inner_block :slot

Content of the Popover

 
<div class="w-[200px] py-space-16 px-space-40" data-testid="popover-top-content">
<!-- This is the content of the popover -->
<h1 class="text-primary">Hello I am on the <span class="text-negative font-bold">top</span></h1>
</div>