Tooltip Infobulle
Introduction
Le composant Tooltip est un élément superposé contextuel affichant un texte descriptif complémentaire et non interactif lorsque le pointeur survole ou focalise l'élément déclencheur.
Conçu spécifiquement pour notre architecture de rendu statique Zero-JS et le modèle d'hydratation conditionnelle, le Tooltip utilise des liaisons efficaces et compatibles avec le page builder, permettant aux auteurs d'épingler des indices contextuels à n'importe quel élément d'UI sans friction.
Usage
Ces exemples illustrent comment les auteurs de contenu configurent et lient des blocs tooltip.
1. Tooltip de base associé à un bouton
Une info-bulle de survol classique expliquant l'action du bouton, avec placement par défaut (haut centré).
{
"type": "tooltip",
"triggerText": "Submit Report",
"content": "Sends your compiled analytics to the billing department."
}
2. Placement multi-directionnel et tooltip désactivé
Le même composant est repositionné dans plusieurs directions (bas, droite, gauche) via la propriété placement pour s'adapter aux panneaux étroits. Le troisième montre la variante disabled, qui n'affiche rien quand l'interaction est désactivée.
{
"type": "tooltip",
"triggerText": "Bottom Hint",
"content": "Appears below the trigger.",
"placement": "bottom",
"interactive": true
}
Props
| Propriété | Type de champ CMS | Défaut | Description / options prises en charge |
|---|---|---|---|
Texte du déclencheur (triggerText) | string | "Hover me" | Libellé visuel imprimé dans le déclencheur. |
Contenu du tooltip (content) | string | - | Texte descriptif complémentaire au survol. |
Placement (placement) | select | "top" | Direction d'ancrage physique relative au déclencheur. • Options : "top", "bottom", "left", "right", plus variantes -start/-end. |
Désactivé (disabled) | boolean | false | Désactive totalement la fonction tooltip. |
Forcer interactif (interactive) | boolean | true | Hydrate l'îlot tooltip pour lier les événements survol/focus. |
Délai (ms) (delayMs) | number | 300 | Millisecondes d'attente avant le déclenchement. |
Architecture Notes
- Alignement intelligent des limites du viewport : L'îlot Preact interactif suit l'espace d'affichage dynamiquement. S'il s'ouvre près d'un bord, il inverse la direction automatiquement (ex. bas vers haut) et se décale sur son axe.
- Délégation unifiée des événements : Détection de survol, affichage au focus et fermeture Échap sont délégués centralement depuis le conteneur, minimisant les liaisons client.
- Overlays sémantiques : Les tooltips compilent en layouts natifs et accessibles avec
role="tooltip",aria-describedbyet IDs de déclencheur uniques d'emblée.