Overlays v1.0.0

Popover

Rich content overlay triggered by click or hover. Unlike Tooltip (hover, text-only), Popover holds forms, menus, and interactive content with configurable placement and an optional arrow indicator. Supports 8 placement positions, dismissible close button, title header, and both click and hover trigger modes.

Preview & Code

Options

Name Type Default Description
placement Symbol :bottom Position relative to trigger: :top, :bottom, :left, :right, :top_start, :top_end, :bottom_start, :bottom_end
arrow Boolean true Show arrow pointing to trigger element
trigger Symbol :click How to show popover: :click or :hover
offset Integer 8 Distance from trigger in pixels (applied via placement margin classes)
title String nil Optional popover title shown in the header
dismissible Boolean true Show close button in the header
class String "" Additional CSS classes for the container

Changelog v1.0.0

- v1.0.0: Initial release with placement, arrow, trigger mode, title, and dismissible options

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now