Info-bulle

Afficher des informations supplémentaires au survol.

Importation

import { Tooltip } from 'asterui'

Exemples

Info-bulle de base

Info-bulle simple qui apparaît au survol.

</>

Hover meThis is a tooltip

import { Tooltip, Button } from 'asterui'

function App() {
  return (
      <Tooltip tip="This is a tooltip">
        <Button>Hover me</Button>
      </Tooltip>
    )
}

export default App

Positions

Les info-bulles peuvent apparaître à différentes positions.

</>

TopTop tooltip

BottomBottom tooltip

LeftLeft tooltip

RightRight tooltip

import { Tooltip, Button } from 'asterui'

function App() {
  return (
      <div className="flex flex-wrap gap-4 justify-center py-8">
        <Tooltip tip="Top tooltip" position="top">
          <Button>Top</Button>
        </Tooltip>
        <Tooltip tip="Bottom tooltip" position="bottom">
          <Button>Bottom</Button>
        </Tooltip>
        <Tooltip tip="Left tooltip" position="left">
          <Button>Left</Button>
        </Tooltip>
        <Tooltip tip="Right tooltip" position="right">
          <Button>Right</Button>
        </Tooltip>
      </div>
    )
}

export default App

Couleurs

Variantes de couleurs pour différents contextes.

</>

PrimaryPrimary tooltip

SecondarySecondary tooltip

AccentAccent tooltip

InfoInfo tooltip

SuccessSuccess tooltip

WarningWarning tooltip

ErrorError tooltip

import { Tooltip, Button, Space } from 'asterui'

function App() {
  return (
      <Space wrap>
        <Tooltip tip="Primary tooltip" color="primary">
          <Button color="primary">Primary</Button>
        </Tooltip>
        <Tooltip tip="Secondary tooltip" color="secondary">
          <Button color="secondary">Secondary</Button>
        </Tooltip>
        <Tooltip tip="Accent tooltip" color="accent">
          <Button color="accent">Accent</Button>
        </Tooltip>
        <Tooltip tip="Info tooltip" color="info">
          <Button color="info">Info</Button>
        </Tooltip>
        <Tooltip tip="Success tooltip" color="success">
          <Button color="success">Success</Button>
        </Tooltip>
        <Tooltip tip="Warning tooltip" color="warning">
          <Button color="warning">Warning</Button>
        </Tooltip>
        <Tooltip tip="Error tooltip" color="error">
          <Button color="error">Error</Button>
        </Tooltip>
      </Space>
    )
}

export default App

Toujours ouverte

Forcer l'info-bulle à rester visible.

</>

Always OpenAlways visible

import { Tooltip, Button } from 'asterui'

function App() {
  return (
      <Tooltip tip="Always visible" open>
        <Button>Always Open</Button>
      </Tooltip>
    )
}

export default App

API

Tooltip

Propriété	Description	Type	Défaut
tip	Contenu texte de l’info-bulle	string	-
position	Position de l’info-bulle	'top' | 'bottom' | 'left' | 'right'	'top'
color	Couleur de l’info-bulle	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
open	Forcer l’info-bulle à être visible	boolean	false
children	Élément qui déclenche l’info-bulle	React.ReactNode	-
className	Classes CSS supplémentaires	string	-

Accessibilité

• Le contenu de l’info-bulle est exposé via aria-describedby
• Les info-bulles apparaissent au focus ainsi qu’au survol
• Contraste de couleur suffisant dans toutes les variantes de couleurs
• Les touches fléchées peuvent être utilisées lorsque l’info-bulle contient des éléments pouvant recevoir le focus