Popover
Displays rich content in a portal, triggered by a button.
Import
import { Popover } from '@chimera-ui/components'Usage
<Popover buttonContent={<NoDisplayName />}>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: 10
}}
>
<p className="font-bold mb-2">
Dimensions
</p>
<fieldset className="Fieldset flex items-center justify-between gap-6">
<label
className="text-base-content-2"
htmlFor="width"
>
<p>
Width
</p>
</label>
<Input
className="w-32 rounded-md border border-line"
defaultValue="100%"
id="width"
/>
</fieldset>
<fieldset className="Fieldset flex items-center justify-between gap-6">
<label
className="text-base-content-2"
htmlFor="maxWidth"
>
<p>
Max. width
</p>
</label>
<Input
className="w-32 rounded-md border border-line"
defaultValue="300px"
id="maxWidth"
/>
</fieldset>
<fieldset className="Fieldset flex items-center justify-between gap-6">
<label
className="text-base-content-2"
htmlFor="height"
>
<p>
Height
</p>
</label>
<Input
className="w-32 rounded-md border border-line"
defaultValue="25px"
id="height"
/>
</fieldset>
<fieldset className="Fieldset flex items-center justify-between gap-6">
<label
className="text-base-content-2"
htmlFor="maxHeight"
>
<p>
Max. height
</p>
</label>
<Input
className="w-32 rounded-md border border-line"
defaultValue="none"
id="maxHeight"
/>
</fieldset>
</div>
<Popover.Close
aria-label="Close"
className="PopoverClose"
>
<NoDisplayName />
</Popover.Close>
<Popover.Arrow className="PopoverArrow" />
</Popover>Subcomponent Usage
<Popover.Root>
<Popover.Trigger asChild>
<NoDisplayName />
</Popover.Trigger>
<Popover.Portal>
<Popover.Content
className="PopoverContent"
sideOffset={5}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: 10
}}
>
<p
className="Text"
style={{
marginBottom: 10
}}
>
<p>
Dimensions
</p>
</p>
<fieldset className="Fieldset flex items-center justify-between gap-6">
<label
className="text-primary"
htmlFor="width"
>
<p>
Width
</p>
</label>
<Input
className="w-32 rounded-md border border-line"
defaultValue="100%"
id="width"
/>
</fieldset>
<fieldset className="Fieldset flex items-center justify-between gap-6">
<label
className="text-primary"
htmlFor="maxWidth"
>
<p>
Max. width
</p>
</label>
<Input
className="w-32 rounded-md border border-line"
defaultValue="300px"
id="maxWidth"
/>
</fieldset>
<fieldset className="Fieldset flex items-center justify-between gap-6">
<label
className="text-primary"
htmlFor="height"
>
<p>
Height
</p>
</label>
<Input
className="w-32 rounded-md border border-line"
defaultValue="25px"
id="height"
/>
</fieldset>
<fieldset className="Fieldset flex items-center justify-between gap-6">
<label
className="text-primary"
htmlFor="maxHeight"
>
<p>
Max. height
</p>
</label>
<Input
className="w-32 rounded-md border border-line"
defaultValue="none"
id="maxHeight"
/>
</fieldset>
</div>
<Popover.Close
aria-label="Close"
className="PopoverClose"
>
<NoDisplayName />
</Popover.Close>
<Popover.Arrow className="PopoverArrow" />
</Popover.Content>
</Popover.Portal>
</Popover.Root>