Popover

Una tarjeta que muestra información adicional cuando se activa.

Importar

import { Popover } from 'asterui'

Ejemplos

Uso básico

Popover simple activado al pasar el mouse.

</>

Hover me

import { Popover, Button } from 'asterui'

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

export default App

Con título

Popover con título y contenido.

</>

Hover me

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 activador

Diferentes modos de activación para el popover.

</>

Hover

Click

Focus

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

Posición - Arriba

Variaciones de posición superior.

</>

Top

Top Left

Top Right

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

Posición - Abajo

Variaciones de posición inferior.

</>

Bottom

Bottom Left

Bottom Right

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

Posición - Izquierda

Variaciones de posición izquierda.

</>

Left

Left Top

Left Bottom

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

Posición - Derecha

Variaciones de posición derecha.

</>

Right

Right Top

Right Bottom

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

Propiedad	Descripción	Tipo	Predeterminado
children	Elemento activador	React.ReactNode	-
content	Contenido del popover	React.ReactNode	-
title	Título del popover	React.ReactNode	-
trigger	Cómo se activa el popover	'hover' | 'click' | 'focus'	'hover'
placement	Posición del popover	'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom'	'top'
open	Si el popover es visible (modo controlado)	boolean	-
onOpenChange	Callback cuando cambia la visibilidad	(open: boolean) => void	-
className	Clases CSS adicionales para envoltorio	string	-
overlayClassName	Clases CSS adicionales para overlay del popover	string	-

Accesibilidad

• El popover usa atributos ARIA apropiados para tooltips
• Los activadores de clic y foco son accesibles por teclado
• El contenido se anuncia a lectores de pantalla cuando se muestra
• La tecla Escape cierra los popovers activados por clic