Skip to content

/

foundations

Introduction Color Grid Icons Playground

brands

Vercel Next.js Turbo

components Internal

Avatar Badge Breadcrumbs Button Calendar Capacity Checkbox Choicebox Code Block Collapse Combobox Context Menu Description Drawer Empty State Entity Error Feedback Fieldset File Tree Gauge Input Keyboard Input Loading Dots Materials Menu Modal Note Pagination Pill Progress Radio Scroller Select Show More Skeleton Slider Snippet Spinner Stack Status Dot Survey Switch Table Tabs Text Textarea Toast Toggle Tooltip Video Window

Popover

Display additional, floating content on click.

Looking to display content on hover? Use the Tooltip component.

Default

Code Editor

Disabled

Code Editor

Color Overlay

Code Editor

Callback

Code Editor

Playground

Explore the different popup positoning options.

anchorOrigin.vertical

topcenterbottom

transformOrigin.vertical

topcenterbottom

anchorOrigin.horizontal

leftcenterright

transformOrigin.horizontal

leftcenterright

Debug Mode

Debug Mode (shows dot, disables click outside behavior)

Code Editor