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. La fonctionnalité expérimentale Info-bulles personnalisées vous permet de configurer des info-bulles dans l'éditeur de visualisation Explorer à 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 la fonctionnalité Labs Info-bulles personnalisées dans votre instance Looker (version initiale). Cette page comprend les sections suivantes :
- Envoyer des commentaires ou obtenir de l'aide
- Exigences concernant les utilisateurs et les instances
- Limites
- Activer les info-bulles personnalisées
- Utiliser les info-bulles personnalisées
- Exemples
- Ressources associées
Envoyer des commentaires ou obtenir de l'aide
Pour nous faire part de vos commentaires ou demander de l'aide, remplissez et envoyez le formulaire Looker Custom Tooltips - Preview Issues.
Exigences relatives aux utilisateurs et aux instances
Pour activer et utiliser la fonctionnalité expérimentale Info-bulles personnalisées, vous devez remplir les conditions suivantes :
- Votre instance Looker (Original) doit exécuter Looker 26.0 ou version ultérieure et être hébergée par Looker.
- Pour activer la fonctionnalité expérimentale Info-bulles personnalisées, vous devez disposer du rôle Administrateur.
- Pour créer des info-bulles personnalisées dans Explorer, vous devez disposer de l'autorisation
exploreet avoir accès au modèle LookML sous-jacent.
Limites
La fonctionnalité expérimentale Info-bulles personnalisées présente les limites suivantes :
- Les info-bulles personnalisées ne sont disponibles que pour les tableaux, les graphiques à valeur unique et les graphiques cartésiens. Les info-bulles personnalisées ne sont pas compatibles avec les graphiques en secteurs, en boîte ou en cascade.
- 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é.
Activer les info-bulles personnalisées
La fonctionnalité de laboratoire Info-bulles personnalisées est activée par défaut.
Si la fonctionnalité de laboratoire Info-bulles personnalisées a été désactivée précédemment, les administrateurs Looker peuvent l'activer en procédant comme suit :
- Dans Looker, cliquez sur l'option Admin dans le menu de navigation principal.
- Cliquez sur l'option Labs dans la section Général pour ouvrir la page Labs.
- Sélectionnez le bouton bascule Info-bulles personnalisées pour activer la fonctionnalité Labs.
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 :
- Ouvrez ou créez une requête Explorer, puis sélectionnez un type de visualisation compatible.
- Cliquez sur Modifier dans l'onglet Visualisation d'Explorer pour ouvrir l'éditeur de visualisation.
- Sélectionnez l'onglet Séries.
- 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.
- Sélectionnez le bouton Info-bulle personnalisée pour activer la fonctionnalité d'info-bulle personnalisée pour cette série spécifique.
- 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.
- Couleur de l'arrière-plan de l'info-bulle : définit la couleur de l'arrière-plan de l'info-bulle.
- Couleur de la police : définit la couleur 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 de la bordure : définit l'ombre de l'info-bulle.
- Alignement du texte : définit l'alignement de la police de l'info-bulle.
- 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.
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.
- Utilisez des balises HTML standards pour mettre en forme le contenu de votre info-bulle (par exemple,
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 d'aperçu de la visualisation.
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 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 le rouge pour les nombres de commandes dont l'état est "ANNULÉE" et sur le 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 :
{% 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 différence entre les commandes annulées et celles effectuées, qui sont 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.