Cuadros de información personalizados

Puedes personalizar las informaciones sobre herramientas que aparecen cuando los usuarios colocan el cursor sobre los elementos de las visualizaciones de Looker. Las informaciones sobre herramientas 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 informaciones sobre herramientas 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 admita la creación de plantillas de Liquid.

En esta página, se proporcionan instrucciones 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 los usuarios y de la instancia

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

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

Limitaciones

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

Cómo usar las informaciones sobre herramientas personalizadas

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

  1. Abre o crea una consulta de Explorar 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 visualización.
  3. Haz clic en la pestaña Series.
    • En el caso de los gráficos de Google Maps y los gráficos de caja, haz clic en la pestaña Trazar y continúa con el paso 5.
    • En el caso de los gráficos de cascada, haz clic en la pestaña Series y continúa con el paso 5.
    • En el caso de los gráficos de un solo valor y los gráficos de un solo registro, haz clic en la pestaña Estilo y continúa con el paso 5.
    • En el caso de los gráficos de embudo funnel charts, haz clic en la pestaña Labels y continúa con el paso 5.
    • En el caso de los gráficos de líneas de tiempo, haz clic en la pestaña Opciones y continúa con el paso 5.
  4. En la sección Personalizaciones, busca la serie a la que deseas agregar la información sobre herramientas. Si hay varias series, expande la que deseas agregar a la información sobre herramientas.
  5. Haz clic en el botón de activación Custom Tooltip para habilitar la funcionalidad de información sobre herramientas personalizada para esa serie o gráfico específico.
  6. En la sección Custom Tooltip, puedes ajustar la apariencia básica de la información sobre herramientas con las opciones proporcionadas:
    • Tamaño de fuente: Establece el tamaño de la fuente de la información sobre herramientas.
    • Familia de fuentes: Establece la familia de fuentes de la información sobre herramientas.
    • Radio del borde: Establece el redondeo de los bordes de la información sobre herramientas. Cuanto mayor sea el número, más redondeados serán los bordes de la información sobre herramientas.
    • Sombra de caja: Establece la sombra de la caja de la información sobre herramientas.
    • Color de fuente: Establece el color de fuente de la información sobre herramientas.
    • Color de fondo: Establece el color de fondo de la información sobre herramientas.
    • Color del borde: Establece el color del borde de la información sobre herramientas.
    • Alineación del texto: Establece la alineación de la fuente de la información sobre herramientas. Elige Alinear a la izquierda, Alinear al centro o Alinear a la derecha. Alinear a la izquierda es la configuración predeterminada.
  7. Además de las opciones anteriores, o como alternativa, puedes aplicar opciones de estilo más avanzadas haciendo clic en Editar contenido de la información sobre herramientas para abrir el editor de HTML Editar contenido de la información sobre herramientas.

  8. En el editor Editar contenido de la información sobre herramientas, puedes usar variables de HTML y Liquid para estructurar y propagar tu información sobre herramientas.

    • Usa etiquetas HTML estándar para dar formato al contenido de la información sobre herramientas (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 todas las variables de Liquid sean compatibles con las informaciones sobre herramientas personalizadas.

  9. A medida que editas el contenido de la información sobre herramientas personalizada, puedes obtener una vista previa de la información sobre herramientas 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.

  10. Haz clic en Guardar en el editor de HTML y, luego, guarda tu Explorar 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 la información sobre herramientas:

Información sobre herramientas personalizada con varios valores de medición

Las informaciones sobre herramientas 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 medición. Con una información sobre herramientas personalizada, 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 "Cantidad de pedidos en 2025" muestra el valor de Orders Count para el Users Country "USA" y se basa en una consulta de Explorar 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 Editar contenido de la información sobre herramientas para la serie Orders Count y establece el contenido para incluir el valor Order Items Count en la información sobre herramientas:

<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 un solo valor 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, Orders Count y Order Items Count, y tener más contexto para 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 limitaciones de esta página, las informaciones sobre herramientas 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 información sobre herramientas personalizada, 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 Explorar incluye las mediciones Orders Count y Order Items Count, agrupadas por las dimensiones Users State y Orders Status. El desarrollador desea 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 Editar contenido de la información sobre herramientas para la serie Orders Count y establece el contenido para incluir los valores de Orders Status y Order Items Count en la información sobre herramientas, 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.

Información sobre herramientas personalizada con funciones comunes de Liquid

Las informaciones sobre herramientas personalizadas 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 desea dar formato a la información sobre herramientas 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 Editar contenido de la información sobre herramientas para la serie Orders Count y establece el valor de la información sobre herramientas 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 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 Orders Count de la columna Orders Status "COMPLETED" muestra texto verde en la información sobre herramientas.

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

El valor Orders Count de la columna Orders Status "CANCELLED" muestra texto rojo en la información sobre herramientas.

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 completados que se muestran en el gráfico de columnas.

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