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. Con el parámetro de configuración de visualización Custom Tooltip, puedes configurar tooltips 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 el parámetro de configuración de visualización Custom Tooltips en tu instancia de Looker (original). Esta página incluye las siguientes secciones:

Requisitos de usuarios y de instancias

Para acceder al parámetro de configuración de visualización Sugerencias personalizadas, debes cumplir con los siguientes requisitos:

  • Tu instancia de Looker (original) debe ejecutar Looker 26.4 o una versión posterior.
  • Para crear sugerencias personalizadas en Explorar, debes tener el permiso explore y acceso al modelo de LookML subyacente.

Limitaciones

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

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. Haz clic en 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. Haz clic en el interruptor Custom Tooltip para habilitar la funcionalidad de la sugerencia personalizada para esa serie o gráfico específicos.
  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.
    • 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.
    • Sombra difuminada: Establece la sombra del cuadro de información sobre herramientas.
    • Color de fuente: Establece el color de fuente de la sugerencia.
    • Color de fondo: Establece el color de fondo de la sugerencia.
    • Color del borde: Establece el color del borde de la sugerencia.
    • Text Alignment: Establece la alineación de la fuente de la información sobre la herramienta. Elige Alinear a la izquierda, Alinear al centro o Alinear a la derecha. Alinear a la izquierda es el parámetro de configuración predeterminado.
  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 las combinaciones de teclas Comando + Retorno en Mac, o Ctrl + Intro en 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:

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>

La información sobre la herramienta del gráfico de valor único de recuento de pedidos muestra el valor de recuento de artículos del pedido de USD 54,340 y el valor de recuento de pedidos de 39,189.

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 tus 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 Cantidad de artículos del pedido que están asociados con una determinada Cantidad de pedidos.

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>

Una sugerencia sobre el valor de recuento de pedidos en un gráfico de tabla muestra los valores de Estado de los usuarios, Estado de los pedidos, Recuento de pedidos y Recuento de artículos del pedido en una tabla de dos columnas.

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:

{% 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.

En la columna Estado del pedido COMPLETADO, una sugerencia muestra el valor de Recuento de pedidos en verde.

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

En la columna Estado del pedido COMPLETADO, una sugerencia muestra el valor de Recuento de pedidos en verde.

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