Popover

A card that displays additional information when triggered.

Import

import { Popover } from 'asterui'

Examples

Basic Usage

Simple popover triggered on hover.

import { Popover, Button } from 'asterui'

function App() {
  return (
      <Popover content="This is a simple popover">
        <Button>Hover me</Button>
      </Popover>
    )
}

export default App

With Title

Popover with a title and content.

import { Popover, Button } from 'asterui'

function App() {
  return (
      <Popover
        title="User Information"
        content="Additional details about the user and their account settings."
      >
        <Button>Hover me</Button>
      </Popover>
    )
}

export default App

Trigger Types

Different trigger modes for the popover.

import { Popover, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Popover trigger="hover" content="Triggered by hovering">
          <Button>Hover</Button>
        </Popover>
        <Popover trigger="click" content="Triggered by clicking">
          <Button>Click</Button>
        </Popover>
        <Popover trigger="focus" content="Triggered by focusing">
          <Button>Focus</Button>
        </Popover>
      </div>
    )
}

export default App

Placement - Top

Top placement variations.

import { Popover, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 justify-center">
        <Popover placement="top" content="Top placement">
          <Button>Top</Button>
        </Popover>
        <Popover placement="topLeft" content="Top left placement">
          <Button>Top Left</Button>
        </Popover>
        <Popover placement="topRight" content="Top right placement">
          <Button>Top Right</Button>
        </Popover>
      </div>
    )
}

export default App

Placement - Bottom

Bottom placement variations.

import { Popover, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 justify-center">
        <Popover placement="bottom" content="Bottom placement">
          <Button>Bottom</Button>
        </Popover>
        <Popover placement="bottomLeft" content="Bottom left placement">
          <Button>Bottom Left</Button>
        </Popover>
        <Popover placement="bottomRight" content="Bottom right placement">
          <Button>Bottom Right</Button>
        </Popover>
      </div>
    )
}

export default App

Placement - Left

Left placement variations.

import { Popover, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 justify-center">
        <Popover placement="left" content="Left placement">
          <Button>Left</Button>
        </Popover>
        <Popover placement="leftTop" content="Left top placement">
          <Button>Left Top</Button>
        </Popover>
        <Popover placement="leftBottom" content="Left bottom placement">
          <Button>Left Bottom</Button>
        </Popover>
      </div>
    )
}

export default App

Placement - Right

Right placement variations.

import { Popover, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 justify-center">
        <Popover placement="right" content="Right placement">
          <Button>Right</Button>
        </Popover>
        <Popover placement="rightTop" content="Right top placement">
          <Button>Right Top</Button>
        </Popover>
        <Popover placement="rightBottom" content="Right bottom placement">
          <Button>Right Bottom</Button>
        </Popover>
      </div>
    )
}

export default App

API

`Popover`

Property	Description	Type	Default
`children`	Trigger element	`React.ReactNode`	-
`content`	Content of the popover	`React.ReactNode`	-
`title`	Title of the popover	`React.ReactNode`	-
`trigger`	How the popover is triggered	`'hover' \| 'click' \| 'focus'`	`'hover'`
`placement`	Position of the popover	`'top' \| 'topLeft' \| 'topRight' \| 'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'left' \| 'leftTop' \| 'leftBottom' \| 'right' \| 'rightTop' \| 'rightBottom'`	`'top'`
`open`	Whether popover is visible (controlled mode)	`boolean`	-
`onOpenChange`	Callback when visibility changes	`(open: boolean) => void`	-
`className`	Additional CSS classes for wrapper	`string`	-
`overlayClassName`	Additional CSS classes for popover overlay	`string`	-

Accessibility

Popover uses proper ARIA attributes for tooltips
Click and focus triggers are keyboard accessible
Content is announced to screen readers when shown
Escape key closes click-triggered popovers