Hygge-UI

Popover

Used to show detailed information inside a pop-up.

Source

Examples

Arrow

Use the showArrow prop to show an arrow on the popover.

Lazy Mount

Use the lazyMounted and/or unmountOnExit prop to defer the mounting of the popover content until it's opened.

Placement

Use the positioning.placement prop to configure the underlying floating-ui positioning logic.

Offset

Use the positioning.offset prop to configure the underlying floating-ui positioning logic.

Same Width

Use the positioning.sameWidth prop to make the popover content the same width as the trigger.

Nested Popover

When nesting floating elements like popover, select, menu, inside of the popover, avoid portalling them to the document's body.

Form

Here's an example of a popover with a form inside.