Skip to main content

Beacon Tooltip

Composant plaçant une balise dans la leçon, soit de manière indépendante, soit attachée à une "cible". En survolant ou en cliquant sur la balise, une info-bulle s'affiche.

Options#

  • title | (string|node): titre à afficher en haut de l'infobulle. Default: none.
  • content | (string|node): contenu de l'infobulle. Default: 'content comes here...'.
  • event | string: si elle est définie sur "clic", l'info-bulle est activée en cliquant sur la balise ; si elle est définie sur "survol", l'info-bulle est activée par le survol. Default: 'click'.
  • placement | string: le placement de l'info-bulle par rapport à la "cible" (soit "haut", "début haut", "fin haut", "bas", "fin bas", "gauche", "début gauche", "fin gauche", "droite", "début droite", "fin droite", "automatique" ou "centre"). Default: 'left'.
  • target | string: Sélecteur de classe ou d'ID pour l'élément auquel attacher l'info-bulle. Default: ''.
  • offset | number: la distance entre l'info-bulle et la "cible" en pixels. Default: 15.
  • onChange | function: rappel invoqué lors du changement d'état de l'infobulle. Reçoit deux arguments : l'action (open ou close) et les props passés. Default: onChange() {}.

Exemples#

Éditeur en direct
Résultat
Dernière mise à jour le {parUser}