Info-bulles personnalisées

Ce produit ou cette fonctionnalité sont soumis aux "Conditions des offres de pré-DG" de la section "Conditions générales du service" des Conditions spécifiques du service. Les produits et fonctionnalités de pré-DG sont proposés "en l'état" et peuvent avoir une compatibilité limitée. Pour en savoir plus, consultez les descriptions des étapes de lancement.

Vous pouvez personnaliser les info-bulles qui s'affichent lorsque les utilisateurs pointent sur des éléments dans les visualisations Looker. Les info-bulles personnalisées vous permettent de fournir plus de contexte, d'afficher des métriques supplémentaires et d'adapter les informations présentées à vos utilisateurs. Le paramètre de visualisation Info-bulle personnalisée vous permet de configurer des info-bulles dans l'éditeur de visualisation Explorer en combinant des paramètres d'interface utilisateur et un éditeur HTML compatible avec les modèles Liquid.

Cette page vous explique comment activer et utiliser le paramètre de visualisation Info-bulles personnalisées dans votre instance Looker (Original). Cette page comprend les sections suivantes :

• Exigences concernant les utilisateurs et les instances
• Limites
• Utiliser les info-bulles personnalisées
• Exemples
• Ressources associées

Exigences concernant les utilisateurs et les instances

Pour accéder au paramètre de visualisation Info-bulles personnalisées, vous devez remplir les conditions suivantes :

• Votre instance Looker (Original) doit exécuter Looker 26.4 ou version ultérieure.
• Pour créer des info-bulles personnalisées dans Explorer, vous devez disposer de l'autorisation explore et avoir accès au modèle LookML sous-jacent.

Limites

La fonctionnalité d'aperçu Info-bulles personnalisées présente les limites suivantes :

• Les info-bulles personnalisées sont compatibles avec la plupart des types de visualisations, à l'exception des suivants :
  • Graphiques multiples en anneau
  • Graphiques en nuage de mots
  • Graphiques de cartes statiques (régions)
  • Graphiques de cartes statiques (points)
  • Graphiques créés à l'aide de l'éditeur de configurations de graphiques (à l'exception des graphiques Sankey)
  • Visualisations personnalisées
• Les info-bulles personnalisées ne peuvent faire référence qu'aux champs inclus dans une requête Explorer.
• Les info-bulles ne peuvent afficher que la même précision des données qu'un champ donné. Si les utilisateurs souhaitent afficher un niveau de détail plus précis que celui disponible dans l'info-bulle, ils doivent utiliser la fonctionnalité Afficher le détail.
• Les info-bulles personnalisées sont enregistrées au niveau de la visualisation. Vous ne pouvez pas les enregistrer au niveau de l'exploration.
• Si vous supprimez un champ d'une requête Explorer qui comporte un info-bulle personnalisé, un utilisateur peut toujours voir cet info-bulle si la requête Explorer est partagée avec lui et qu'il ajoute à nouveau le champ à la requête Explorer.
• Le code HTML affiché dans les info-bulles personnalisées est soumis aux règles de nettoyage du code HTML de Looker.
• Il est possible que toutes les variables Liquid ne soient pas compatibles avec les info-bulles personnalisées.
• Les personnalisations des info-bulles remplacent tout thème appliqué à un tableau de bord interne (non intégré) ou à un tableau de bord intégré.

Utiliser les info-bulles personnalisées

Si vous disposez des autorisations appropriées, vous pouvez personnaliser l'info-bulle d'une série dans votre visualisation Explorer. Pour personnaliser l'info-bulle, procédez comme suit :

1. Ouvrez ou créez une requête Explorer, puis sélectionnez un type de visualisation compatible.
2. Cliquez sur Modifier dans l'onglet Visualisation d'Explorer pour ouvrir l'éditeur de visualisation.
3. Cliquez sur l'onglet Séries.
   • Pour les graphiques Google Maps et les graphiques en boîte, cliquez sur l'onglet Tracer, puis passez à l'étape 5.
   • Pour les graphiques en cascade, cliquez sur l'onglet Série, puis passez à l'étape 5.
   • Pour les graphiques à valeur unique et les graphiques à enregistrement unique, cliquez sur l'onglet Style, puis passez à l'étape 5.
   • Pour les graphiques en entonnoir, cliquez sur l'onglet Libellés, puis passez à l'étape 5.
   • Pour les graphiques chronologiques, cliquez sur l'onglet Options, puis passez à l'étape 5.
4. Dans la section Personnalisations, recherchez la série à laquelle vous souhaitez ajouter l'info-bulle. S'il y a plusieurs séries, développez celle à laquelle vous souhaitez ajouter un info-bulle.
5. Cliquez sur le bouton Info-bulle personnalisée pour activer la fonctionnalité d'info-bulle personnalisée pour cette série ou ce graphique spécifiques.
6. Dans la section Info-bulle personnalisée, vous pouvez ajuster l'apparence de base de l'info-bulle à l'aide des options fournies :
   • Taille de la police : définit la taille de la police de l'info-bulle.
   • Famille de polices : définit la famille de polices de la police de l'info-bulle.
   • Rayon de la bordure : définit l'arrondi des bords de l'info-bulle. Plus le nombre est élevé, plus les bords de l'info-bulle sont arrondis.
   • Ombre portée : définit l'ombre portée de la boîte de l'info-bulle.
   • Couleur de la police : définit la couleur de la police de l'info-bulle.
   • Couleur de l'arrière-plan : définit la couleur de l'arrière-plan de l'info-bulle.
   • Couleur de la bordure : définit la couleur de la bordure de l'info-bulle.
   • Alignement du texte : définit l'alignement de la police de l'info-bulle. Sélectionnez Aligner à gauche, Aligner au centre ou Aligner à droite. Aligner à gauche est le paramètre par défaut.
7. En plus des options précédentes, vous pouvez appliquer des options de style plus avancées en cliquant sur Modifier le contenu de l'info-bulle pour ouvrir l'éditeur HTML Modifier le contenu de l'info-bulle.

8. Dans l'éditeur Modifier le contenu de l'info-bulle, vous pouvez utiliser des variables HTML et Liquid pour structurer et remplir votre info-bulle.

   • Utilisez des balises HTML standards pour mettre en forme le contenu de votre info-bulle (par exemple, <div>, <span>, <strong>, <table>,<ul>, <ol>). Notez que le code HTML affiché est soumis aux règles de nettoyage HTML de Looker.
   • Il est possible que toutes les variables Liquid ne soient pas compatibles avec les info-bulles personnalisées.

9. Lorsque vous modifiez le contenu de l'info-bulle personnalisée, vous pouvez la prévisualiser en cliquant sur Prévisualiser (ou en utilisant les raccourcis clavier Cmd+Retour pour Mac ou Ctrl+Entrée pour PC) et en pointant sur les points de données dans le volet de prévisualisation de la visualisation.

10. Cliquez sur Enregistrer dans l'éditeur HTML, puis enregistrez votre exploration en tant que Look ou en tant que tuile de tableau de bord pour conserver les modifications.

Exemples

Les exemples suivants illustrent des cas d'utilisation pour différents niveaux de personnalisation des info-bulles :

• Info-bulle personnalisée avec plusieurs valeurs de mesure
• Info-bulle personnalisée avec des valeurs masquées structurées sous forme de tableau
• Info-bulle personnalisée avec des fonctions Liquid courantes

Info-bulle personnalisée avec plusieurs valeurs de mesures

Les info-bulles personnalisées peuvent être utiles lorsque vous souhaitez fournir aux utilisateurs plus de contexte sur un point de données affiché dans une visualisation. Par exemple, un graphique à valeur unique n'affiche la valeur que d'une seule mesure. Une info-bulle personnalisée vous permet d'afficher plus de données et de fournir à vos utilisateurs plus de contexte sur les données du graphique.

Dans cet exemple, un graphique à valeur unique intitulé "Nombre de commandes en 2025" affiche la valeur de Nombre de commandes pour Pays de l'utilisateur "États-Unis". Il est basé sur une requête Explorer qui inclut également Nombre d'articles commandés. Toutefois, la valeur Nombre d'articles commandés n'est pas affichée dans le graphique.

Le code HTML suivant est saisi dans l'éditeur Modifier le contenu de l'info-bulle pour la série Nombre de commandes. Il définit le contenu de l'info-bulle pour qu'il inclue la valeur Nombre d'articles commandés :

<div style="padding: 5px; font-family: Arial, sans-serif; font-size: 13px;">
  <div>
    <strong>Order Items Count:</strong> {{ order_items.count }}
  </div>
  <div>
    <strong>Orders Count:</strong> {{ orders.count }}
  </div>
</div>

Les utilisateurs peuvent voir les valeurs des deux champs, Nombre de commandes et Nombre d'articles commandés, et obtenir plus de contexte sur les données affichées dans le graphique.

Info-bulle personnalisée avec des valeurs masquées structurées sous forme de tableau

Comme indiqué dans les limitations de cette page, les info-bulles personnalisées ne peuvent faire référence qu'aux champs inclus dans une requête Explorer. Toutefois, vous n'aurez peut-être pas envie d'afficher tous les champs "Explorer" dans un graphique. Grâce à un info-bulle personnalisé, vous pouvez afficher les données des champs masqués dans les visualisations à vos utilisateurs, sans les ajouter à un graphique.

Dans cet exemple, un tableau de données Explorer inclut les mesures Nombre de commandes et Nombre d'articles commandés, regroupées par les dimensions État des utilisateurs et État des commandes. Le développeur souhaite afficher un petit tableau aux utilisateurs et masque les champs État des commandes et Nombre d'articles de la commande dans le tableau. Toutefois, le développeur souhaite toujours que les utilisateurs voient les valeurs État des commandes et Nombre d'articles de la commande associées à un Nombre de commandes donné.

Le code HTML suivant est saisi dans l'éditeur Modifier le contenu de l'info-bulle pour la série Nombre de commandes. Il définit le contenu de l'info-bulle de manière à inclure les valeurs État de la commande et Nombre d'articles de la commande, structurées sous forme de tableau :

<div>
    <div>
        <table border="1">
          <!-- Table Body -->
          <tbody>
            <!-- Row 1 -->
            <tr>
              <td>
                <strong>Order status</strong>
              </td>
              <td>
                {{ orders.status }}
              </td>
            </tr>
            <!-- Row 2 -->
            <tr>
              <td>
                <strong>State</strong>
              </td>
              <td>
                {{ users.state }}
              </td>
            </tr>
            <!-- Row 3 -->
            <tr>
              <td>
                <strong>Count of orders</strong>
              </td>
              <td>
                {{ orders.count }}
              </td>
            </tr>
            <!-- Row 4 -->
            <tr>
              <td>
                <strong>Count of order items</strong>
              </td>
              <td>
                {{ order_items.count }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>

Les utilisateurs peuvent voir toutes les données de la requête Explorer, sans les champs supplémentaires affichés dans le tableau.

Info-bulle personnalisée avec des fonctions Liquid courantes

Les info-bulles personnalisées sont compatibles avec les fonctions Liquid courantes, telles que le piping et l'utilisation d'instructions de conversion en minuscules. Dans cet exemple, un graphique à colonnes affiche le nombre de commandes regroupées par état des commandes. Le développeur souhaite mettre en forme l'info-bulle afin que les utilisateurs puissent rapidement identifier la différence entre le nombre de commandes pour un état de commande "ANNULÉE" et un état de commande "TERMINÉE".

Le code HTML et Liquid suivant est saisi dans l'éditeur Modifier le contenu de l'info-bulle pour la série Nombre de commandes. Il définit la valeur de l'info-bulle sur rouge pour les nombres de commandes dont l'état est "ANNULÉE" et sur vert pour les commandes dont l'état est "TERMINÉE". Le code utilise une attribution de variable et un canal pour garantir l'exactitude de la chaîne et appliquer la mise en forme conditionnelle spécifiée :

Remarque : Pour garantir l'exactitude des instructions conditionnelles, appliquez des transformations de données lors de l'attribution de variables.

{% assign my_variable = orders.status | downcase | strip %}
{% if my_variable == "completed" %}
  <span style="color:green">{{orders.count}}</span>
{% else %}
  <span style="color:red">{{orders.count}}</span>
{% endif %}

La valeur Nombre de commandes de la colonne État des commandes "TERMINÉE" s'affiche en vert dans l'info-bulle.

La valeur Nombre de commandes de la colonne État des commandes "ANNULÉE" affiche du texte rouge dans l'info-bulle.

Les utilisateurs peuvent rapidement faire la distinction entre les commandes annulées et celles effectuées affichées dans le graphique en colonnes.

Ressources associées

• En savoir plus sur la création de visualisations
• Consultez la page de documentation Documentation de référence sur les variables Liquid pour découvrir d'autres façons d'utiliser Liquid dans Looker.
• Pour en savoir plus sur les balises HTML compatibles avec Looker, consultez la page de documentation sur l'assainissement HTML.