Créer une infobulle, un menu ou une fenêtre

Une aide peut apparaître près d’un bouton, au centre de l’écran ou sur le côté. Choisissez sa forme selon ce que la personne doit lire. Gardez les informations essentielles dans la page : une fenêtre doit faciliter la lecture, pas rendre une action obligatoire plus difficile.

1. Choisir la bonne forme

Infobulle (Tooltip) : une courte indication liée à un élément. Menu (Dropdown) : un petit contenu à proximité du déclencheur. Fenêtre (Modal) : un contenu centré qui demande plus d’attention. Panneau latéral (Sidenav) : des informations qui s’ouvrent sur un côté.

Dans Design, sélectionnez l’élément en Expert, ouvrez le + du groupe Événements, puis survolez Superposition pour choisir le comportement. Un clic direct sur Superposition ajoute son réglage par défaut ; le survol permet de voir les quatre choix.

Une superposition est un comportement propre de l’élément. Il n’est pas nécessaire de construire un workflow de redirection pour l’ouvrir. Les exemples Alma utilisent un contenu préparé à l’intérieur de chaque déclencheur.

2. Préparer le contenu et l’aperçu

Ouvrez le réglage ajouté. Pour un menu, une fenêtre ou un panneau, il faut un élément de contenu associé. Élément de contenu trouvé indique que le builder l’a identifié. Si aucun contenu n’existe, la commande Ajouter un élément de contenu superposé sert à en créer un. Personnalisez ensuite ce contenu avec les commandes habituelles du design.

Activez Garder ouvert pour vérifier le contenu dans le builder. Retirez ce réglage avant de publier : l’ouverture forcée doit servir à préparer le design, puis laisser le visiteur ouvrir et fermer l’aide.

Réglez l’Effet et la Durée lorsqu’ils sont proposés. Une animation brève accompagne le geste sans ralentir la lecture. Les prises utilisent une durée de 0,5 seconde pour rendre l’apparition facile à suivre.

3. Ouvrir un menu près du déclencheur

Choisissez Dropdown pour afficher un petit contenu à proximité. Réglez sa Position, puis son Déclencheur : clic, survol ou survol avec focus, selon le besoin. Une ouverture au clic reste plus facile à comprendre sur un écran tactile qu’un survol seul.

Vérifiez le contenu, le placement, la flèche si elle est utile et l’effet d’apparition. Retirez Garder ouvert, enregistrez et testez sur le site publié. Dans la recette Alma, le clic ouvre le contenu et Échap le referme.

4. Ouvrir une fenêtre centrée

Choisissez Modal pour un message qui mérite davantage d’attention, par exemple les conseils avant une première visite. Son déclencheur est le clic. Le réglage Arrière-plan permet de choisir le fond sombre autour du contenu ; l’Effet et la Durée règlent l’apparition.

Une fenêtre doit rester courte, lisible et facile à fermer. Testez son ouverture puis Échap après publication. La vérification Alma porte sur un message simple ; elle ne certifie pas un formulaire complexe, la gestion complète du focus ou un parcours de paiement dans la fenêtre.

5. Ouvrir un panneau latéral

Choisissez Sidenav pour des informations pratiques que l’on souhaite consulter sans changer de page. Réglez son Côté, sa Largeur, son arrière-plan et sa durée. Son déplacement vient du côté choisi ; le menu d’effets des autres formes n’est pas proposé ici.

Gardez une largeur adaptée à un petit écran, puis testez le rendu publié. L’exemple utilise le côté droit et 320 px. La recette vérifie l’ouverture au clic et la fermeture par Échap sur ordinateur et sur un écran de 390 px.

6. Contrôler les infobulles et les limites

Une infobulle doit rester très courte. Préférez Survol + Focus pour permettre sa découverte au clavier, et ne lui confiez pas une information indispensable sur mobile.

Dans Événements, choisissez Tooltip, puis ouvrez son réglage. Cliquez dans le texte et remplacez-le par une phrase courte, comme « Une séance sur réservation. ». Enregistrez, publiez et survolez le déclencheur sur le site : c’est le texte saisi qui doit apparaître.

Le préréglage utilise Survol + Focus. Vérifiez aussi le déclencheur au clavier : lorsque le focus arrive sur l’élément, la même explication doit être disponible. Le texte doit compléter un libellé déjà compréhensible, sans le remplacer. Sur un téléphone, le survol n’est pas un geste fiable pour une information essentielle.

Les prises montrent les réglages nocode et le résultat réel des quatre formes. Les contrôles portent sur des textes simples, le survol et le focus de l’infobulle, ainsi que l’ouverture au clic et la fermeture par Échap du menu, de la fenêtre et du panneau. Le clic dans leur contenu est contrôlé séparément. Cela ne valide pas automatiquement un formulaire complexe placé à l’intérieur : testez sa saisie, sa soumission et ses erreurs dans votre propre parcours.

Après toute modification, contrôlez le résultat publié, la fermeture et la lisibilité sur petit écran. Pour choisir un élément déclencheur adapté, consultez Configurer un bouton, un lien ou une ancre.