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 mediante 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 usuario y de 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 Exploraciones, 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:

  • Las informaciones sobre herramientas personalizadas son compatibles con la mayoría de los tipos de visualización, excepto los siguientes:
  • Las informaciones sobre herramientas personalizadas solo pueden hacer referencia a los campos que se incluyen en una consulta de Explorar.
  • Las informaciones sobre herramientas 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 la información sobre herramientas, deben usar la funcionalidad de desglose.
  • Las informaciones sobre herramientas 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 información sobre herramientas personalizada, un usuario aún puede ver esa información sobre herramientas si la consulta de Explorar se comparte con él y vuelve a agregar el campo a la consulta de Explorar.
  • El HTML renderizado en las informaciones sobre herramientas personalizadas 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.
  • Las personalizaciones de la información sobre herramientas anularán cualquier tema que se aplique a un panel interno (no incorporado) o a un panel incorporado.

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 la 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 HTML y variables de 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 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 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 la información sobre herramientas:

Información sobre herramientas personalizada con varios valores de medidas

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 medida. 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 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 medidas 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 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 la cantidad de pedidos en un gráfico de tabla muestra los valores de Estado de los usuarios, Estado de los pedidos, Cantidad de pedidos y Cantidad 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 HTML y Liquid se ingresan en el editor Editar contenido de la información sobre herramientas para la serie Orders Count y establecen que el valor de la información sobre herramientas 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.
  • 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.