Tooltip (BcTooltip) ​

Composant tooltip standalone pour enrichir n'importe quel élément avec une aide contextuelle.

Distinction : BcTooltip est un composant indépendant. Pour les tooltips intégrés dans un champ formulaire, utiliser la prop help de BcField.

Démo — Placements ​

top

ⓘ

right

ⓘ

bottom

ⓘ

left

ⓘ

Trigger hover vs click ​

Par défaut : hover. Pour les surfaces tactiles ou les infos longues, utiliser click.

ⓘⓘ

Props ​

PropTypeDéfautDescription
textString—Contenu du tooltip
placement'top' | 'right' | 'bottom' | 'left''top'Position du tooltip
trigger'hover' | 'click''hover'Déclencheur d'affichage
delayNumber200Délai en ms avant affichage (hover)
max-widthString'240px'Largeur max du tooltip

Cas d'usage ​

Sur une métrique inline :

html
<BcTooltip placement="top" text="Calculé sur les transactions des 30 derniers jours">
  <span class="bc-display">42%</span>
</BcTooltip>

Sur un badge statut :

html
<BcTooltip placement="right" text="Dossier bloqué — document KYB expiré">
  <bc-badge variant="danger">BLOQUÉ</bc-badge>
</BcTooltip>

Sur une icône info :

html
<BcTooltip trigger="click" placement="bottom"
  text="La rotation de la clé API révoque immédiatement l'ancienne clé.">
  <i class="bi bi-info-circle text-primary" style="cursor: pointer;" />
</BcTooltip>