Centre d'assistance

Info-bulles, popovers et fenêtres modales

Pas de commentaire

Des info-bulles, des popovers et des fenêtres modales sont des outils excellents pour clarifier certains mots ou pour montrer des informations supplémentaires en contexte sans avoir trop de text ou sans occuper trop d’espace de l’écran.

Vous pouvez utiliser les info-bulles, les popovers et les fenêtres modales dans des enquêtes et des éléments du ReportBuilder. Ils ne peuvent PAS être utilisés dans des e-mails.

Lequel utliser ?

  • Info-bulle : utilisez des info-bulles pour montrer de texte court aux répondants lorsqu’ils survolent un mot ou une icône.
  • Popover : utilisez des popovers pour afficher de texte plus long ou lorsque vous souhaitez créer un lien vers une page Web externe. Ce texte apparaît lorsque le répondant clique sur un mot ou une icône. La fenêtre reste visible jusqu’à ce qu’ils cliquent à nouveau en dehors du popover.
  • Fenêtre modale : utilisez des fenêtres modales pour afficher de texte long, des images et des liens. Cela crée une superposition qui couvre une grande partie de l’écran. L’arrière-plan devient plus sombre, de sorte que l’accent est mis sur la fenêtre. Les répondants doivent cliquer sur le X dans le coin supérieur droit ou en dehors de la fenêtre modale pour la fermer.

Syntaxe

Vous pouvez créer les trois élément an ajoutant de code CSL à votre text. Ce code doit suivre la syntaxe suivante :

  • Opérateur : détermine ce que vous souhaitez utiliser : une info-buller, un popover ou une fenêtre modale.
  • Texte actif : c’est le texte qui réagit au survol ou au clic. Laissez vide l’espace entre les guillemets lorsque vous souhaitez uniquement afficher une icône.
  • Contenu : c’est le contenu qui sera montré dans l’info-bulle, le popover ou la fenêtre modale.
  • Position (optionnel) : utilisez une position pour déterminer où le contenu doit être affiché (seulement pour des info-bulles ou des popovers).
  • Icône (optionnel) : afficher une icône en tant que déclencheur au lieu de texte.

Comment ajouter ?

1. Utilisez le menu déroulant

Ajoutez une info-bulle, un popover ou une fenêtre modale en utilisant le menu déroulant Variables dans l’éditeur :

  1. Mettez le curseur où vous souhaitez montrer l’élément.
  2. Cliquez sur le menu déroulant Variables.
  3. Sélectionnez Info-bulle, Popover ou Fenêtre modale dans ce menu.

Remarque : tous les éléments dans le menu déroulant sont classés par ordre alphabétique. L’ordre peut donc différer de celui de cette animation.

2. Tapez vous-même le CSL

  1. Commencez le code CSL avec deux accolades {{.
  2. Tapez l’opérateur (tooltip, popover ou modal).
  3. Tapez le texte actif entre guillemets. Le texte actif est le texte qui déclenchera l’élément, par exemple “cliquez ici”
  4. Ajoutez une espace.
  5. Tapez le contenu entre guillemets.
  6. Optionellement ajoutez une position.
  7. Optionellement une classe pour une icône.
  8. Fermez le code CSL avec deux accolades }}.

Exemples :

{{tooltip "plus d'infos" "Je suis une info-bulle." "top"}}
{{tooltip "" "Je suis une info-bulle déclenchée par une icône" "top" "fas fa-info-circle"}}
{{popover "plus d'infos" "Je suis un popover" "right"}}
{{modal "plus d'infos" "Je suis une fenêtre modale"}}

Utilisez une icône comme déclencheur

Pour déclencher votre info-bulle, popover ou fenêtre modale avec une icône, ajoutez un paramètre additionnel comme montré dans la syntaxe dessus.

Ajoutez la classe Font Awesome pour afficher l’icône désirée.

Le code dessous affichera une icône de cercle d’information. Remarquez que le texte actif est maintenant vide. De cette manière seulement l’icône sera affichée.

{{opérateur "" "contenu" "fas fa-info-circle"}}

Le code dessous afficheré du texte et une icône de cercle d’information à côté.

{{opérateur "text actif" "contenu" "fas fa-question-circle"}}

Contenu dynamique

Survey modal window

Voici un petit conseil très utile : si le contenu que vous souhaitez afficher dans votre fenêtre modale est très long, ou comporte beaucoup de formatage ou d’images, placez-le dans une question Texte/Média au lieu de directement dans le code CSL. Puis affichez le contenu dans votre fenêtre modale en utilisant une variable.

Suivez ces étapes pour ajouter de contenu dynamique à une fenêtre modale :

    1. Ajoutez une question Texte/Média à votre enquête et cachez-la.
    2. Tapez ici le texte que vous souhaitez afficher dans la fenêtre modale.
    3. Allez vers l’onglet Paramètres et ajoutez une étiquette de données.
      Dans l’exemple dessous nous avons utilisé ‘texte1’.
    4. Cliquez sur Enregistrer.
    5. Maintenant vous pouvez afficher ce texte dans une fenêtre modale dans n’importe quelle page de votre enquête, ou même dans un élément du ReportBuilder, en référençant l’étiquette de données de la question Texte/Média à l’aide d’une variable. Comme ça :
      Cliquez {{modal "ici" survey.questions.texte1}} pour plus d'informations.

Cette méthode gardera votre code CSL bien rangé et facilitera considérablement les traductions !

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.