Introduction

Le composant Popover est un élément superposé interactif qui affiche des détails supplémentaires, des actions ou des formulaires contextuels dans une carte flottante positionnée par rapport à un élément de déclenchement (ancre).

Conçu spécifiquement pour notre architecture de rendu statique Zero-JS et notre modèle d'hydratation conditionnelle, le Popover utilise des liaisons efficaces et compatibles avec le page builder. Il reste totalement statique dans le HTML jusqu'à son hydratation en îlot Preact interactif pour gérer les bascules et la touche Échap fluidement.

Usage

Ces exemples illustrent comment les auteurs de contenu configurent et lient des blocs popover.

1. Popover informatif de base

Un popover propre, uniquement textuel, idéal pour expliquer des termes, donner des définitions ou afficher de légers messages d'aide sans encombrer la page.

{
  "type": "popover",
  "triggerText": "Learn More",
  "title": "Data Residency",
  "description": "Your profile data is stored securely in compliant Frankfurt (EU) server nodes."
}

2. Popover avancé avec corps et actions de pied de page

Un popover d'intégration comportant des sections distinctes : un en-tête informatif, un texte de corps et des boutons d'action personnalisés imbriqués dans l'emplacement de pied de page.

{
  "type": "popover",
  "triggerText": "Setup Account",
  "title": "Configure API Integrations",
  "description": "Connect with external tools seamlessly.",
  "body": "Your subscription allows up to 5 concurrent server channels. Ensure your client secret credentials are copied before proceeding.",
  "footer": "Connect Keys",
  "showArrow": true
}

3. Popover avec déclencheur SVG personnalisé et blocs enfants imbriqués

Pour des tableaux de bord plus complexes, les popover peuvent intégrer des déclencheurs SVG personnalisés (en markup brut dans triggerIcon) et afficher des listes de composants enfants (comme des Badges, du Texte ou des boutons supplémentaires) dans la carte flottante.

{
  "type": "popover",
  "triggerText": "System Status",
  "triggerIcon": "<circle cx=\"12\" cy=\"12\" r=\"10\" /><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\" /><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\" />",
  "triggerAriaLabel": "System Operations Status Info",
  "title": "System Heartbeat",
  "description": "Operational health checks",
  "showArrow": true,
  "closable": true,
  "children": [
    {
      "blockType": "badge",
      "text": "API: OK",
      "colorPalette": "green"
    },
    {
      "blockType": "badge",
      "text": "DB: OK",
      "colorPalette": "green"
    }
  ]
}

Props

Architecture Notes

• Alignement intelligent des limites du viewport : L'îlot Preact interactif suit dynamiquement l'espace d'affichage. Si le popover s'ouvre près d'un bord, il inverse automatiquement la direction (ex. bas vers haut) et se décale sur son axe pour éviter le découpage.
• Délégation unifiée des événements : Ouverture, fermeture, clic-extérieur et touche Échap sont délégués proprement depuis un écouteur central sur l'élément racine, limitant les liaisons côté client.
• Overlays sémantiques : Les popover compilent en layouts natifs et accessibles avec role="dialog", aria-haspopup="dialog" et aria-expanded="true|false", garantissant une compatibilité totale avec les lecteurs d'écran.