Puedes personalizar los cuadros de información que aparecen cuando los usuarios colocan el cursor sobre los elementos de las visualizaciones de Looker. Los cuadros de información personalizados te permiten proporcionar más contexto, mostrar métricas adicionales y adaptar la información que se presenta a tus usuarios. La función de Labs Custom Tooltips te permite configurar cuadros de información en el editor de visualización de Explorar con una combinación de parámetros de configuración de la IU y un editor de HTML que admite plantillas de Liquid.
En esta página, se proporciona orientación para habilitar y usar la función de Labs Custom Tooltips en tu instancia de Looker (original). Esta página incluye las siguientes secciones:
- Proporciona comentarios o solicita asistencia
- Requisitos de los usuarios y de la instancia
- Limitaciones
- Habilita los cuadros de información personalizados
- Cómo usar los cuadros de información personalizados
- Ejemplos
- Recursos relacionados
Proporciona comentarios o solicita asistencia
Requisitos de los usuarios y de la instancia
Para habilitar y usar la función de Labs Custom Tooltips, debes cumplir con los siguientes requisitos:
- Tu instancia de Looker (original) debe ejecutar Looker 26.0 o una versión posterior y estar alojada en Looker.
- Debes tener el rol de administrador para habilitar la función de Labs Custom Tooltips.
- Para crear cuadros de información personalizados en Exploraciones, debes tener el permiso
explorey acceso al modelo LookML subyacente.
Limitaciones
La función de Labs Custom Tooltips tiene las siguientes limitaciones:
- Los cuadros de información personalizados solo se admiten para gráficos de tabla, gráficos de un solo valor y gráficos cartesianos. No se admiten para gráficos circulares, de caja y bigotes ni de cascada.
- Los cuadros de información personalizados solo pueden hacer referencia a los campos que se incluyen en una consulta de Exploración.
- Los cuadros de información solo pueden mostrar la misma granularidad de datos que un campo determinado. Si los usuarios quieren ver un nivel de datos más detallado que el disponible en el cuadro de información, deben usar la función de desglose.
- Los cuadros de información personalizados se guardan a nivel de la visualización. No se pueden guardar a nivel de la Exploración.
- Si quitas un campo de una consulta de Exploración que tiene un cuadro de información personalizado, un usuario aún puede ver ese cuadro de información si la consulta de Exploración se comparte con él y vuelve a agregar el campo a la consulta de Exploración.
- El código HTML renderizado en los cuadros de información personalizados está sujeto a las reglas de desinfección de HTML de Looker.
- Es posible que no se admitan todas las variables de Liquid para los cuadros de información personalizados.
- Las personalizaciones de los cuadros de información anularán cualquier tema que se aplique a un panel interno (no incorporado) o a un panel incorporado.
Habilita los cuadros de información personalizados
La función de Labs Custom Tooltips está habilitada de forma predeterminada.
Si la función de Labs Custom Tooltips se inhabilitó anteriormente, los administradores de Looker pueden habilitarla siguiendo estos pasos:
- En Looker, haz clic en la opción Admin en el menú de navegación principal.
- Haz clic en la opción Labs en la sección General para abrir la página Labs.
- Selecciona el botón de activación Custom Tooltips para habilitar la función de Labs.
Cómo usar los cuadros de información personalizados
Si tienes los permisos adecuados, puedes personalizar el cuadro de información de una serie en tu visualización de Exploración. Para personalizar el cuadro de información, sigue estos pasos:
- Abre o crea una consulta de Exploración y selecciona un tipo de visualización compatible.
- Haz clic en Editar en la pestaña Visualización de Explorar para abrir el editor de visualización.
- Selecciona la pestaña Series.
- En la sección Customizations, busca la serie a la que deseas agregar el cuadro de información. Si hay varias series, expande la que deseas agregar un cuadro de información.
- Selecciona el botón de activación Custom Tooltip para habilitar la funcionalidad de cuadro de información personalizado para esa serie específica.
- En la sección Custom Tooltip, puedes ajustar la apariencia básica del cuadro de información con las opciones proporcionadas:
- Tamaño de fuente: Establece el tamaño de la fuente del cuadro de información.
- Font Family: Establece la familia de fuentes del cuadro de información.
- Tooltip Background Color: Establece el color de fondo del cuadro de información.
- Font Color: Establece el color de la fuente del cuadro de información.
- Border Radius: Establece la redondez de los bordes del cuadro de información. Cuanto mayor sea el número, más redondos serán los bordes del cuadro de información.
- Border Shadow: Establece la sombra del cuadro de información.
- Alineación del texto: Establece la alineación de la fuente del cuadro de información.
- Además de las opciones anteriores, o como alternativa, puedes aplicar opciones de estilo más avanzadas haciendo clic en Edit Tooltip Content para abrir el editor de HTML Edit tooltip content.
En el editor Edit Tooltip Content, puedes usar HTML y variables de Liquid para estructurar y propagar tu cuadro de información.
- Usa etiquetas HTML estándar para dar formato al contenido del cuadro de información (por ejemplo,
<div>,<span>,<strong>,<table>,<ul>,<ol>). Ten en cuenta que el código HTML renderizado está sujeto a las reglas de desinfección de HTML de Looker. - Es posible que no se admitan todas las variables de Liquid para los cuadros de información personalizados.
- Usa etiquetas HTML estándar para dar formato al contenido del cuadro de información (por ejemplo,
A medida que editas el contenido del cuadro de información personalizado, puedes obtener una vista previa del cuadro de información haciendo clic en Vista previa (o los atajos de teclado Comando-Retorno para Mac o Ctrl+Intro para PC) y colocando el cursor sobre los puntos de datos en el panel de vista previa de la visualización.
Haz clic en Guardar en el editor de HTML y, luego, guarda tu Exploración como un Look o como un mosaico del panel para conservar los cambios.
Ejemplos
En los siguientes ejemplos, se muestran casos de uso para diferentes niveles de personalización de cuadros de información:
- Cuadro de información personalizado con varios valores de medición
- Cuadro de información personalizado con valores ocultos estructurados como una tabla
- Cuadro de información personalizado con funciones comunes de Liquid
Cuadro de información personalizado con varios valores de medición
Los cuadros de información personalizados pueden ser útiles en los casos en los que deseas proporcionar más contexto a los usuarios sobre un punto de datos que se muestra en una visualización. Por ejemplo, un gráfico de un solo valor muestra el valor de una sola medición. Con un cuadro de información personalizado, puedes mostrar más datos y proporcionar a tus usuarios más contexto sobre los datos del gráfico.
En este ejemplo, un gráfico de un solo valor titulado "Count of orders in 2025" muestra el valor de Orders Count para el Users Country "USA" y se basa en una consulta de Exploración que también incluye Order Items Count. Sin embargo, el valor de Order Items Count no se muestra en el gráfico.
El siguiente código HTML se ingresa en el editor Edit Tooltip Content para la serie Orders Count y establece el contenido para incluir el valor Order Items Count en el cuadro de información:
<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>
Los usuarios pueden ver los valores de ambos campos, Orders Count y Order Items Count, y tener más contexto para los datos que se muestran en el gráfico.
Cuadro de información personalizado con valores ocultos estructurados como una tabla
Como se indica en la información sobre limitaciones de esta página, los cuadros de información personalizados solo pueden hacer referencia a los campos que se incluyen en una consulta de Exploración. Sin embargo, es posible que no quieras mostrar todos los campos de Exploración en un gráfico. Con un cuadro de información personalizado, puedes mostrar datos de campos que están ocultos en las visualizaciones para tus usuarios, sin agregarlos a un gráfico.
En este ejemplo, una tabla de datos de Exploración incluye las mediciones Orders Count y Order Items Count, agrupadas por las dimensiones Users State y Orders Status. El desarrollador quiere mostrar una tabla pequeña a los usuarios y oculta los campos Orders Status y Order Items Count del gráfico de tabla. Sin embargo, el desarrollador aún quiere que los usuarios vean los valores de Orders Status y Order Items Count que están asociados con un Orders Count determinado.
El siguiente código HTML se ingresa en el editor Edit Tooltip Content para la serie Orders Count y establece el contenido para incluir los valores de Orders Status y Order Items Count en el cuadro de información, estructurados como una tabla:
<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>
Los usuarios pueden ver todos los datos de la consulta de Exploración, sin los campos adicionales que se muestran en el gráfico de tabla.
Cuadro de información personalizado con funciones comunes de Liquid
Los cuadros de información personalizados admiten funciones comunes de Liquid, como la canalización y el uso de instrucciones de conversión a minúsculas. En este ejemplo, un gráfico de columnas muestra Orders Count agrupado por Orders Status. El desarrollador quiere dar formato al cuadro de información para que los usuarios puedan identificar rápidamente la diferencia entre el Orders Count para un Orders Status "CANCELLED" y un Orders Status "COMPLETED".
El siguiente código HTML y Liquid se ingresa en el editor Edit Tooltip Content para la serie Orders Count y establece el valor del cuadro de información para que aparezca en rojo para los recuentos de pedidos con un estado "CANCELLED" y en verde para los pedidos con un estado "COMPLETED". El código usa una asignación de variables y una canalización para garantizar la exactitud de la cadena y aplicar el formato condicional especificado:
{% 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 %}
El valor Orders Count de la columna Orders Status "COMPLETED" muestra texto verde en el cuadro de información.
El valor Orders Count de la columna Orders Status "CANCELLED" muestra texto rojo en el cuadro de información.
Los usuarios pueden distinguir rápidamente entre los pedidos cancelados y completados que se muestran en el gráfico de columnas.
Recursos relacionados
- Obtén más información para crear visualizaciones.
- Consulta la página de documentación de referencia de variables de Liquid para obtener más formas de usar Liquid en Looker.
- Consulta la página de documentación de desinfección de HTML para obtener más información sobre las etiquetas HTML compatibles con Looker.