Brickslab.

@brickslab/ui-web

Bulle d'aide contextuelle CSS-only. Apparaît au survol sans aucun JavaScript côté client — comportement piloté par :hover CSS via data-bl-tooltip-* attributes. Supporte 4 positions, délai d'apparition, largeur max et contenu ReactNode.

Aperçu

tooltip basique sur un bouton · position top (défaut)

Ceci est un tooltip

Positions

top · bottom · left · right

top
En haut
bottom
En bas
left
À gauche
right
À droite

Délai

sans délai vs delay=true (0.3s)

sans délai
Apparaît immédiatement
delay
Apparaît après 0.3s

MaxWidth

défaut 220px vs maxWidth réduit

maxWidth=220 (défaut)
Texte plus long pour montrer la largeur maximale par défaut du tooltip.
maxWidth=120
Texte contraint dans une largeur réduite.

Désactivé

disabled=true — aucune bulle au survol

actif
Ce tooltip est actif
disabled

Contenu riche

content accepte React.ReactNode

JSX avec couleur
Statut : Actif
alerte
⚠ Attention — Action irréversible

Props

PropTypeDéfautRequisDescription
contentReact.ReactNode—✓Contenu de la bulle tooltip (texte ou JSX).
childrenReact.ReactNode—✓Élément déclencheur — le tooltip s'affiche au survol.
position"top" | "bottom" | "left" | "right""top"—Position de la bulle par rapport à l'élément déclencheur.
delaybooleanfalse—Ajoute un délai de 0.3s avant l'apparition de la bulle.
maxWidthnumber220—Largeur maximale de la bulle en pixels.
disabledbooleanfalse—Désactive le tooltip — aucune bulle au survol.

Utilisation

tsx
import { Tooltip } from "@brickslab/ui-web";

// Basique (position top par défaut)
<Tooltip content="Ceci est un tooltip">
  <button>Survolez-moi</button>
</Tooltip>

// Positions
<Tooltip content="En haut" position="top"><button>Top</button></Tooltip>
<Tooltip content="En bas" position="bottom"><button>Bottom</button></Tooltip>
<Tooltip content="À gauche" position="left"><button>Left</button></Tooltip>
<Tooltip content="À droite" position="right"><button>Right</button></Tooltip>

// Avec délai
<Tooltip content="Apparaît après 0.3s" delay>
  <button>Avec délai</button>
</Tooltip>

// MaxWidth réduit
<Tooltip content="Texte long qui doit être contraint" maxWidth={120}>
  <button>MaxWidth 120px</button>
</Tooltip>

// Désactivé
<Tooltip content="Jamais affiché" disabled>
  <button>Désactivé</button>
</Tooltip>

// Contenu riche
<Tooltip content={<span>Statut : <span style={{ color: "#4ADE80" }}>Actif</span></span>}>
  <button>Contenu JSX</button>
</Tooltip>