Info-bulles personnalisées

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. Avec le paramètre de visualisation Custom Tooltip (Info-bulle personnalisée), vous pouvez configurer des info-bulles dans l'éditeur de visualisation d'exploration à l'aide d'une combinaison de paramètres d'interface utilisateur et d'un éditeur HTML compatible avec les modèles Liquid.

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

Conditions requises pour les utilisateurs et les instances

Pour accéder au paramètre de visualisation Custom Tooltips (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 les explorations, vous devez disposer de l'autorisation explore et avoir accès au modèle LookML sous-jacent.

Limites

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

Utiliser des info-bulles personnalisées

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

  1. Ouvrez ou créez une requête d'exploration, puis sélectionnez un type de visualisation compatible.
  2. Cliquez sur Edit (Modifier) dans l'onglet Visualization (Visualisation) de l'exploration pour ouvrir l'éditeur de visualisation.
  3. Cliquez sur l'onglet Series (Séries).
  4. Dans la section Customizations (Personnalisations), recherchez la série à laquelle vous souhaitez ajouter l'info-bulle. S'il existe plusieurs séries, développez celle à laquelle vous souhaitez ajouter une info-bulle.
  5. Cliquez sur le bouton Custom Tooltip (Info-bulle personnalisée) pour activer la fonctionnalité d'info-bulle personnalisée pour cette série ou ce graphique spécifique.
  6. Dans la section Custom Tooltip (Info-bulle personnalisée), vous pouvez ajuster l'apparence de base de l'info-bulle à l'aide des options fournies :
    • Font Size (Taille de la police) : définit la taille de la police de l'info-bulle.
    • Font Family (Famille de polices) : définit la famille de polices de l'info-bulle.
    • Border Radius (Rayon de la bordure) : définit l'arrondi des bords de l'info-bulle. Plus le chiffre est élevé, plus les bords de l'info-bulle sont arrondis.
    • Box Shadow (Ombre de la boîte) : définit l'ombre de la boîte de l'info-bulle.
    • Font Color (Couleur de la police) : définit la couleur de la police de l'info-bulle.
    • Background Color (Couleur de l'arrière-plan) : définit la couleur de l'arrière-plan de l'info-bulle.
    • Border Color (Couleur de la bordure) : définit la couleur de la bordure de l'info-bulle.
    • Text Alignment (Alignement du texte) : définit l'alignement de la police de l'info-bulle. Sélectionnez Align Left (Aligner à gauche), Align Center (Centrer) ou Align Right (Aligner à droite). Align Left (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 Edit Tooltip Content (Modifier le contenu de l'info-bulle) pour ouvrir l'éditeur HTML Edit tooltip content (Modifier le contenu de l'info-bulle).

  8. Dans l'éditeur Edit Tooltip Content (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 rendu est soumis aux règles de nettoyage HTML de Looker.
    • Toutes les variables Liquid ne sont pas compatibles avec les info-bulles personnalisées.

  9. Lorsque vous modifiez le contenu de l'info-bulle personnalisée, vous pouvez en afficher un aperçu en cliquant sur Preview (Aperçu) (ou sur les raccourcis clavier Commande+Retour pour Mac ou Ctrl+Entrée pour PC) et en pointant sur les points de données dans le volet d'aperçu de la visualisation.

  10. Cliquez sur Save (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

Les info-bulles personnalisées peuvent être utiles lorsque vous souhaitez fournir plus de contexte aux utilisateurs 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. Avec une info-bulle personnalisée, vous pouvez afficher plus de données et 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 Orders Count (Nombre de commandes) pour le Users Country (Pays des utilisateurs) "USA" (États-Unis) et est basé sur une requête d'exploration qui inclut également Order Items Count (Nombre d'articles commandés). Toutefois, la valeur de Order Items Count (Nombre d'articles commandés) n'est pas affichée dans le graphique.

Le code HTML suivant est saisi dans l'éditeur Edit Tooltip Content (Modifier le contenu de l'info-bulle) pour la série Orders Count (Nombre de commandes) et définit le contenu de manière à inclure la valeur Order Items Count (Nombre d'articles commandés) dans l'info-bulle :

<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>

Une info-bulle pour le graphique à valeur unique &quot;Nombre de commandes&quot; affiche la valeur &quot;Nombre d&#39;articles commandés&quot; de 54 340 $, et la valeur &quot;Nombre de commandes&quot; de 39 189.

Les utilisateurs peuvent voir les valeurs des deux champs, Orders Count (Nombre de commandes) et Order Items Count (Nombre d'articles commandés), et disposer de plus de contexte pour 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 informations sur les limites de cette page, les info-bulles personnalisées ne peuvent faire référence qu'aux champs inclus dans une requête d'exploration. Toutefois, vous ne souhaiterez peut-être pas afficher tous les champs d'exploration dans un graphique. Avec une info-bulle personnalisée, vous pouvez afficher les données des champs qui sont masqués dans les visualisations pour vos utilisateurs, sans les ajouter à un graphique.

Dans cet exemple, un tableau de données d'exploration inclut les mesures Orders Count (Nombre de commandes) et Order Items Count (Nombre d'articles commandés), regroupées par les dimensions Users State (État des utilisateurs) et Orders Status (État des commandes). Le développeur souhaite afficher un petit tableau aux utilisateurs et masque les champs Orders Status (État des commandes) et Order Items Count (Nombre d'articles commandés) dans le graphique. Toutefois, il souhaite toujours que les utilisateurs voient les valeurs Orders Status (État des commandes) et Order Items Count (Nombre d'articles commandés) associées à un Orders Count (Nombre de commandes) donné.

Le code HTML suivant est saisi dans l'éditeur Edit Tooltip Content (Modifier le contenu de l'info-bulle) pour la série Orders Count (Nombre de commandes) et définit le contenu de manière à inclure les valeurs de Orders Status (État des commandes) et Order Items Count (Nombre d'articles commandés) dans l'info-bulle, 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>

L&#39;info-bulle de la valeur &quot;Nombre de commandes&quot; dans un tableau affiche les valeurs &quot;État des utilisateurs&quot;, &quot;État des commandes&quot;, &quot;Nombre de commandes&quot; et &quot;Nombre d&#39;articles commandés&quot; dans un tableau à deux colonnes.

Les utilisateurs peuvent voir toutes les données de la requête d'exploration, sans que les champs supplémentaires ne soient affichés dans le graphique.

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 downcast. Dans cet exemple, un graphique à colonnes affiche Orders Count (Nombre de commandes) regroupé par Orders Status (É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 Orders Count (Nombre de commandes) pour un Orders Status (État des commandes) "CANCELLED" (Annulé) et un Orders Status (État des commandes) "COMPLETED" (Terminé).

Le code HTML et Liquid suivants sont saisis dans l'éditeur Edit Tooltip Content (Modifier le contenu de l'info-bulle) pour la série Orders Count (Nombre de commandes) et définit la valeur de l'info-bulle de manière à ce qu'elle s'affiche en rouge pour les nombres de commandes dont l'état est "CANCELLED" (Annulé) et en vert pour les commandes dont l'état est "COMPLETED" (Terminé). Le code utilise une attribution de variable et un piping pour garantir l'exactitude de la chaîne et appliquer la mise en forme conditionnelle spécifiée :

{% 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 Orders Count (Nombre de commandes) de la colonne Orders Status (État des commandes) "COMPLETED" (Terminé) s'affiche en vert dans l'info-bulle.

Un info-bulle affiche la valeur &quot;Nombre de commandes&quot; en vert dans la colonne &quot;État des commandes&quot; (COMPLETED).

La valeur Orders Count (Nombre de commandes) de la colonne Orders Status (État des commandes) "CANCELLED" (Annulé) s'affiche en rouge dans l'info-bulle.

Un info-bulle affiche la valeur &quot;Nombre de commandes&quot; en vert dans la colonne &quot;État des commandes&quot; (COMPLETED).

Les utilisateurs peuvent rapidement distinguer les commandes annulées et terminées affichées dans le graphique à colonnes.

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