Cuadros de información personalizados

Puedes personalizar las sugerencias que aparecen cuando los usuarios colocan el cursor sobre los elementos de las visualizaciones de Looker. Las sugerencias personalizadas te permiten proporcionar más contexto, mostrar métricas adicionales y adaptar la información que se presenta a tus usuarios. La función experimental Custom Tooltips te permite configurar Tooltips en el editor de visualización 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 recibe asistencia
• Requisitos de usuario y de instancia
• Limitaciones
• Habilita las sugerencias personalizadas
• Cómo usar las Tooltips personalizadas
• Ejemplos
• Recursos relacionados

Proporciona comentarios o recibe asistencia

Para enviar comentarios o solicitar asistencia, completa y envía este formulario de Problemas de vista previa de Looker Custom Tooltips.

Requisitos de usuarios y de instancias

Para habilitar y usar la función experimental 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 Sugerencias personalizadas.
• Para crear sugerencias personalizadas en Explorar, debes tener el permiso explore y acceso al modelo de LookML subyacente.

Limitaciones

La función de Labs Custom Tooltips tiene las siguientes limitaciones:

• Las sugerencias personalizadas solo se admiten en los gráficos de tabla, los gráficos de un solo valor y los gráficos cartesianos. Las sugerencias personalizadas no son compatibles con los gráficos circulares, de caja ni de cascada.
• Las sugerencias personalizadas solo pueden hacer referencia a los campos que se incluyen en una consulta de Explorar.
• Las sugerencias solo pueden mostrar el mismo nivel de detalle de los datos que un campo determinado. Si los usuarios quieren ver un nivel de datos más detallado que el que está disponible en la sugerencia, deben usar la función de explorar en detalle.
• Las sugerencias personalizadas se guardan a nivel de la visualización. No se pueden guardar a nivel de Explorar.
• Si quitas un campo de una consulta de Explorar que tiene una sugerencia personalizada, el usuario podrá seguir viendo esa sugerencia si la consulta de Explorar se comparte con él y vuelve a agregar el campo a la consulta de Explorar.
• El código HTML renderizado en las sugerencias personalizadas está sujeto a las reglas de limpieza de HTML de Looker.
• Es posible que no todas las variables de Liquid sean compatibles con las sugerencias personalizadas.
• Las personalizaciones de la sugerencia anularán cualquier tema que se aplique a un panel interno (no integrado) o a un panel integrado.

Habilita las sugerencias personalizadas

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:

1. En Looker, haz clic en la opción Administrador en el menú de navegación principal.
2. Haz clic en la opción Labs en la sección General para abrir la página de Labs.
3. Selecciona el botón de activación Custom Tooltips para habilitar la función de Labs.

Cómo usar las sugerencias personalizadas

Si tienes los permisos adecuados, puedes personalizar la sugerencia de una serie en tu visualización de Explorar. Para personalizar la sugerencia, sigue estos pasos:

1. Abre o crea una consulta de Explore y selecciona un tipo de visualización compatible.
2. Haz clic en Editar en la pestaña Visualización de Explorar para abrir el editor de visualizaciones.
3. Selecciona la pestaña Series.
4. En la sección Personalizaciones, busca la serie a la que quieres agregar la sugerencia. Si hay varias series, expande la que quieras agregar una sugerencia.
5. Selecciona el botón de activación Custom Tooltip para habilitar la funcionalidad de la sugerencia personalizada para esa serie específica.
6. En la sección Cuadro de información personalizado, 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 de la sugerencia.
   • Familia de fuentes: Establece la familia de fuentes de la fuente de la información sobre la herramienta.
   • Color de fondo de la sugerencia: Establece el color de fondo de la sugerencia.
   • Color de fuente: Establece el color de fuente de la sugerencia.
   • Radio del borde: Establece el redondeo de los bordes de la información sobre la herramienta. Cuanto mayor sea el número, más redondeados serán los bordes de la sugerencia.
   • Border Shadow: Establece la sombra de la sugerencia.
   • Text Alignment: Establece la alineación de la fuente de la información sobre la herramienta.
7. Además de las opciones anteriores, o como alternativa a ellas, puedes aplicar opciones de diseño más avanzadas haciendo clic en Edit Tooltip Content para abrir el editor HTML Edit tooltip content.

8. En el editor Edit Tooltip Content, puedes usar HTML y variables de Liquid para estructurar y completar tu sugerencia.

   • Usa etiquetas HTML estándar para dar formato al contenido de la sugerencia (por ejemplo, <div>, <span>, <strong>, <table>,<ul>, <ol>). Ten en cuenta que el HTML renderizado está sujeto a las reglas de saneamiento de HTML de Looker.
   • Es posible que no todas las variables de Liquid sean compatibles con las sugerencias personalizadas.

9. Mientras editas el contenido de la sugerencia personalizada, puedes obtener una vista previa de la sugerencia haciendo clic en Vista previa (o con los atajos de teclado Command + 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.

10. Haz clic en Guardar en el editor de HTML y, luego, guarda tu Explorar como un Look o como una tarjeta del panel para conservar los cambios.

Ejemplos

En los siguientes ejemplos, se muestran casos de uso para diferentes niveles de personalización de la información sobre herramientas:

• Sugerencia personalizada con varios valores de medidas
• Sugerencia personalizada con valores ocultos estructurados como una tabla
• Sugerencia personalizada con funciones comunes de Liquid

Información sobre herramientas personalizada con varios valores de medidas

Las sugerencias personalizadas 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 métrica. Con una sugerencia personalizada, puedes mostrar más datos y brindar a los usuarios más contexto sobre los datos del gráfico.

En este ejemplo, un gráfico de un solo valor titulado "Cantidad de pedidos en 2025" muestra el valor de Cantidad de pedidos para el País de los usuarios "EE.UU." y se basa en una consulta de Explorar que también incluye Cantidad de artículos de pedidos. 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 la sugerencia:

<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, Recuento de pedidos y Recuento de artículos del pedido, y tener más contexto sobre los datos que se muestran en el gráfico.

Información sobre herramientas personalizada con valores ocultos estructurados como una tabla

Como se indica en la información sobre las limitaciones de esta página, las sugerencias personalizadas solo pueden hacer referencia a los campos que se incluyen en una consulta de Explorar. Sin embargo, es posible que no desees mostrar todos los campos de Explorar en un gráfico. Con una sugerencia personalizada, puedes mostrar a los usuarios datos de campos que están ocultos en las visualizaciones sin agregarlos a un gráfico.

En este ejemplo, una tabla de datos de Explorar incluye las medidas Cantidad de pedidos y Cantidad de artículos pedidos, agrupadas por las dimensiones Estado de los usuarios y Estado de los pedidos. El desarrollador quiere mostrar una tabla pequeña a los usuarios y oculta los campos Estado de los pedidos y Cantidad de artículos del pedido del gráfico de tabla. Sin embargo, el desarrollador aún quiere que los usuarios vean los valores de Estado de los pedidos y Recuento de artículos del pedido que están asociados con un Recuento de pedidos 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 la sugerencia, 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 Explorar, sin los campos adicionales que se muestran en el gráfico de tabla.

Sugerencia personalizada con funciones comunes de Liquid

Las sugerencias personalizadas admiten funciones comunes de Liquid, como la canalización y el uso de instrucciones de conversión hacia abajo. En este ejemplo, un gráfico de columnas muestra el recuento de pedidos agrupados por estado de los pedidos. El desarrollador desea dar formato a la sugerencia para que los usuarios puedan identificar rápidamente la diferencia entre el recuento de pedidos para un estado del pedido "CANCELADO" y un estado del pedido "COMPLETADO".

El siguiente código HTML y Liquid se ingresa en el editor Edit Tooltip Content para la serie Orders Count y establece que el valor de la sugerencia aparezca en rojo para los recuentos de pedidos con el estado "CANCELLED" y en verde para los pedidos con el estado "COMPLETED". El código usa una asignación de variables y una canalización para garantizar la precisión de la cadena y aplicar el formato condicional especificado:

Nota: Para garantizar la precisión de las instrucciones condicionales, aplica transformaciones de datos durante la asignación 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 %}

El valor de Recuento de pedidos para la columna Estado del pedido "COMPLETED" muestra texto verde en la sugerencia.

El valor de Recuento de pedidos para la columna Estado del pedido "CANCELADO" muestra texto rojo en la sugerencia.

Los usuarios pueden distinguir rápidamente entre los pedidos cancelados y los completados que se muestran en el gráfico de columnas.

Recursos relacionados

• Obtén más información para crear visualizaciones.
• Revisa la página de documentación de la referencia de variables de Liquid para conocer más formas de usar Liquid en Looker.
• Revisa la página de documentación sobre la limpieza de HTML para obtener más información sobre las etiquetas HTML compatibles con Looker.