Popover

Hover or click to see more content, like popping open a tent, useful for additional info without leaving the context..

Basic

Popovers are small overlays that display additional information about an element when the user clicks on it.

Installation

In the terminal, run the following command to begin:
npx hq-kit add popover

Controlled

You can control the popover programmatically.

Overlay Arrow

The default has an arrow, but you can disable it by passing the showArrow prop.

Placement

You can change the placement of the popover by passing the placement prop.

The list above shows the primary directions, but you can also use specific placements like bottom left or top right. Here are all the available placement options:

Primary DirectionPlacement
bottombottom, bottom left, bottom right, bottom start, bottom end
toptop, top left, top right, top start, top end
leftleft, left top, left bottom
startstart, start top, start bottom
rightright, right top, right bottom
endend, end top, end bottom

Custom Close

The popover can be customized to include a custom close button.

Popover Trigger

All the examples above use <Button/> as the trigger, but what if you wanna switch it up, like using <Avatar/> instead? No sweat, just roll with PopoverTrigger like this:

SheetTooltip