Popover

Une carte qui affiche des informations supplémentaires lorsqu’elle est déclenchée.

Import

import { Popover } from 'asterui'

Exemples

Utilisation de base

Popover simple déclenché au survol.

</>

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

Avec titre

Popover avec un titre et du contenu.

</>

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

Types de déclencheur

Différents modes de déclenchement pour le 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

Placement - Haut

Variantes de placement en haut.

</>

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

Placement - Bas

Variantes de placement en bas.

</>

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

Placement - Gauche

Variantes de placement à gauche.

</>

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

Placement - Droite

Variantes de placement à droite.

</>

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

Propriété	Description	Type	Défaut
children	Élément déclencheur	React.ReactNode	-
content	Contenu du popover	React.ReactNode	-
title	Titre du popover	React.ReactNode	-
trigger	Comment le popover est déclenché	'hover' | 'click' | 'focus'	'hover'
placement	Position du popover	'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom'	'top'
open	Si le popover est visible (mode contrôlé)	boolean	-
onOpenChange	Rappel lors du changement de visibilité	(open: boolean) => void	-
className	Classes CSS supplémentaires pour le wrapper	string	-
overlayClassName	Classes CSS supplémentaires pour la superposition du popover	string	-

Accessibilité

• Popover utilise des attributs ARIA appropriés pour les infobulles
• Les déclencheurs de clic et de focus sont accessibles au clavier
• Le contenu est annoncé aux lecteurs d’écran lorsqu’il est affiché
• La touche Échap ferme les popovers déclenchés par clic