Popover

Um card que exibe informações adicionais quando acionado.

Importação

import { Popover } from 'asterui'

Exemplos

Uso Básico

Popover simples acionado ao passar o mouse.

import { Popover, Button } from 'asterui'

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

export default App

Com Título

Popover com título e conteúdo.

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

Tipos de Gatilho

Diferentes modos de gatilho para o 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

Posicionamento - Topo

Variações de posicionamento no topo.

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

Posicionamento - Base

Variações de posicionamento na base.

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

Posicionamento - Esquerda

Variações de posicionamento à esquerda.

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

Posicionamento - Direita

Variações de posicionamento à direita.

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`

Propriedade	Descrição	Tipo	Padrão
`children`	Elemento gatilho	`React.ReactNode`	-
`content`	Conteúdo do popover	`React.ReactNode`	-
`title`	Título do popover	`React.ReactNode`	-
`trigger`	Como o popover é acionado	`'hover' \| 'click' \| 'focus'`	`'hover'`
`placement`	Posição do popover	`'top' \| 'topLeft' \| 'topRight' \| 'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'left' \| 'leftTop' \| 'leftBottom' \| 'right' \| 'rightTop' \| 'rightBottom'`	`'top'`
`open`	Se o popover está visível (modo controlado)	`boolean`	-
`onOpenChange`	Callback quando visibilidade muda	`(open: boolean) => void`	-
`className`	Classes CSS adicionais para wrapper	`string`	-
`overlayClassName`	Classes CSS adicionais para overlay do popover	`string`	-

Acessibilidade

Popover usa atributos ARIA apropriados para tooltips
Gatilhos de clique e foco são acessíveis por teclado
Conteúdo é anunciado aos leitores de tela quando mostrado
Tecla Escape fecha popovers acionados por clique