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. Le paramètre de visualisation Info-bulle personnalisée vous permet de configurer des info-bulles dans l'onglet Style d'une exploration (ou dans le menu Modifier de la visualisation pour les explorations classiques) en combinant des paramètres d'interface utilisateur et un éditeur HTML compatible avec les modèles Liquid.

Cette page explique comment activer et utiliser le paramètre de visualisation Info-bulles personnalisées sur 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 Info-bulles personnalisées, vous devez remplir les conditions suivantes :

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

Limites

La fonctionnalité 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 l'onglet Style dans le panneau Configurer pour modifier la visualisation. Pour les explorations classiques, cliquez sur Modifier dans l'onglet Visualisation de l'exploration pour ouvrir l'éditeur de visualisation.
  3. Ouvrez le menu Série.
  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 une 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écifique.
  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 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 de la case : définit l'ombre de la case de l'info-bulle.
    • Couleur de la police : définit la couleur de la police de l'info-bulle.
    • Couleur d'arrière-plan : définit la couleur d'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, Centrer ou Aligner à droite. Aligner à gauche est le paramètre par défaut.
  7. En plus ou à la place 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 du code HTML et des variables 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 certaines 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 prévisualiser l'info-bulle en cliquant sur Aperçu (ou en utilisant les raccourcis clavier Cmd+Entrée 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 Enregistrer dans l'éditeur HTML, puis enregistrez votre exploration sous forme de présentation ou de 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 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é "Count of orders in 2025" (Nombre de commandes en 2025) affiche la valeur de Orders Count (Nombre de commandes) pour Users Country (Pays des utilisateurs) "USA". Il est basé sur une requête d'exploration qui inclut également Order Items Count (Nombre d'articles commandés). Cependant, la valeur de Order Items Count 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 Orders Count (Nombre de commandes). Il 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;Orders Count&quot; affiche la valeur &quot;Order Items Count&quot; de 54 340 $ et la valeur &quot;Orders Count&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 disposent 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 la section Limites de cette page, les info-bulles personnalisées ne peuvent référencer que les champs inclus dans une requête d'exploration. Toutefois, vous ne souhaitez peut-être pas afficher tous les champs de l'exploration dans un graphique. Avec une info-bulle personnalisée, vous pouvez afficher pour vos utilisateurs des données provenant de champs masqués dans les visualisations, 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 pour les utilisateurs et masque les champs État de la commande et Nombre d'articles de la commande dans le tableau. Toutefois, le développeur 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 Modifier le contenu de l'info-bulle pour la série Nombre de commandes. Il définit le contenu de manière à inclure les valeurs de État de la commande et de Nombre d'articles commandés dans l'info-bulle, 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>

Une info-bulle pour la valeur &quot;Nombre de commandes&quot; dans un tableau affiche les valeurs &quot;État de l'utilisateur&quot;, &quot;État de la commande&quot;, &quot;Nombre de commandes&quot; et &quot;Nombre d'articles de la commande&quot; dans un tableau à deux colonnes.

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

Info-bulle personnalisée avec des fonctions Liquid courantes

Les info-bulles personnalisées prennent en charge les fonctions Liquid courantes, telles que le piping et l'utilisation d'instructions downcast. Dans cet exemple, un graphique à colonnes affiche le nombre de commandes regroupées par état de la commande. Le développeur souhaite mettre en forme l'info-bulle pour que les utilisateurs puissent identifier rapidement la différence entre le nombre de commandes pour un état de la commande "annulé" et un état de la commande "terminé".

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 pour qu'elle s'affiche en rouge pour les nombres de commandes dont l'état est "annulé" et en vert pour les commandes dont l'état est "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 == "complete" %}
  <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) "complete" (terminées) affiche du texte vert dans l'info-bulle.

Une info-bulle affiche la valeur &quot;Orders Count&quot; (Nombre de commandes) en vert dans la colonne &quot;Orders Status&quot; (État des commandes) &quot;Complete&quot; (Terminée).

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

Une info-bulle affiche la valeur &quot;Orders Count&quot; (Nombre de commandes) en vert dans la colonne &quot;Orders Status&quot; (État de la commande) &quot;complete&quot; (terminée).

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