Brickslab.Tools

@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)

Positions

top · bottom · left · right

top

bottom

left

right

Délai

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

sans délai

delay

MaxWidth

défaut 220px vs maxWidth réduit

maxWidth=220 (défaut)

maxWidth=120

Désactivé

disabled=true — aucune bulle au survol

actif

disabled

Contenu riche

content accepte React.ReactNode

JSX avec couleur

alerte

Props

Prop	Type	Défaut	Requis	Description
`content`	`React.ReactNode`	—	✓	Contenu de la bulle tooltip (texte ou JSX).
`children`	`React.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.
`delay`	`boolean`	`false`	—	Ajoute un délai de 0.3s avant l'apparition de la bulle.
`maxWidth`	`number`	`220`	—	Largeur maximale de la bulle en pixels.
`disabled`	`boolean`	`false`	—	Désactive le tooltip — aucune bulle au survol.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  content={<span>...</span>}
  children={<span>...</span>}
  position="top"
  delay={false}
  maxWidth={220}
  disabled={false}
/>

contentchildrenpositiondelaymaxWidthdisabled

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>