Cómo aprovechar al máximo el libro de recetas de visualizaciones de Looker: personalización de cuadros de información
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
La ventana de información de la visualización muestra el valor de las dimensiones y las métricas seleccionadas de forma predeterminada y puede ayudar a los usuarios a comprender la importancia de un solo dato.
Por ejemplo, una información sobre herramientas para una visualización de mapa que se basa en el Margen bruto total agrupado por Estado mostrará los valores de ambos campos cuando un usuario coloque el cursor sobre el estado de California.
Sin embargo, ¿qué sucede si quieres incluir campos distintos de los predeterminados en la información sobre herramientas para que los usuarios puedan obtener más información o contexto sobre un dato sin tener que buscar en otro lugar?
Puedes personalizar la información sobre herramientas para que muestre valores de varios campos especificados, incluidos los que no están en la consulta Explorar.
Ingredientes
Variables líquidas: Las variables líquidas renderizan los valores de otros campos junto con la consulta existente de Explorar.
Parámetro html: Los campos que se definen en el parámetro html de una métrica se renderizarán en la información sobre herramientas cuando un usuario coloque el cursor sobre una visualización.
Visualización: La información sobre herramientas aparecerá cuando un usuario coloque el cursor sobre un dato en ciertos tipos de visualizaciones.
Conocimientos básicos sobre el uso de Liquid en Looker y la codificación HTML Visita la sección Cómo usar variables de Liquid en el parámetro html de la página de documentación de html para obtener la información de referencia necesaria.
Permisos para guardar contenido (si quieres guardar la visualización como un aspecto o un panel)
Consideraciones para la personalización de cuadros de información
Es importante tener en cuenta lo siguiente cuando personalices una información sobre herramientas:
Los valores del parámetro html se convierten en el eje Y de una visualización.
El valor que deseas mostrar en el eje Y debe ser el valor del parámetro sql de la medida.
Cuando uses cualquier medida con formato (una medida de type: percent_of_total o una medida con un parámetro value_format_name o value_format), asegúrate de usar la sintaxis de Liquid para el valor renderizado {{ field_name._rendered_value }} (en el que field_name es el nombre real de la medida o dimensión).
Ejemplo
De forma predeterminada, la información sobre herramientas de los datos de visualización incluirá los valores de Margen bruto total y Estado. Sin embargo, ¿qué sucede si quieres proporcionarles a los usuarios información adicional que no se indica en el mapa ni se incluye en la búsqueda de Explorar? ¿Qué sucede si quieres incluir el valor de un campo llamado Porcentaje de margen bruto total en lugar de Estado? Si incluyes el Porcentaje del margen bruto total, los usuarios podrán comprender cómo se compara el valor del Margen bruto total de un dato individual con el margen bruto total del conjunto de datos.
Para personalizar la información sobre herramientas, sigue estos pasos:
measure: total_gross_margin {
type: sum
value_format_name: decimal_2
sql: ${gross_margin} ;;
html: {{ rendered_value }} | {{percent_of_gross_margin._rendered_value }} of total ;;
}
En el Modo de desarrollo, navega a la definición de LookML del campo que deseas personalizar.
Puedes navegar directamente a la definición de LookML de un campo desde una exploración.
Determina los campos y valores que deseas incluir en la información sobre herramientas, además del campo original. Por ejemplo, Porcentaje del margen bruto total.
Agrega un parámetro html a la métrica original a la que se hace referencia en la consulta Explorar y que se muestra en la información sobre herramientas. En este caso, la medida que se encuentra actualmente en la consulta Explorar y que se muestra en la información sobre herramientas es Margen bruto total.
En el parámetro html, crea una expresión con variables de Liquid que adjunte los campos adicionales al valor de la medida existente.
En este ejemplo, se usa la variable Liquid _rendered_value para mostrar valores con formato de Looker. Por ejemplo, total_gross_margin usa el formato de Looker para dos decimales, y percent_of_total_gross_margin usa el formato de Looker para el porcentaje con dos decimales.
Puedes usar una barra vertical,|, para separar los valores de diferentes campos.
También puedes agregar otras palabras que puedan aclarar el significado de los otros valores que se renderizan en la información sobre la herramienta. En este caso, se agrega of total para aclarar qué significa el valor porcentual.
Guarda, valida y envía tu código a producción después de verificar que funcione como se espera.
La información sobre herramientas ahora mostrará dos valores cuando un usuario coloque el cursor sobre un dato con la información sobre herramientas: el valor total_gross_margin del dato y el valor percent_of_total_gross_margin correspondiente.
Próximos pasos
Una vez que hayas creado tu visualización con una información sobre herramientas personalizada, puedes compartirla con otras personas:
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Difícil de entender","hardToUnderstand","thumb-down"],["Información o código de muestra incorrectos","incorrectInformationOrSampleCode","thumb-down"],["Faltan la información o los ejemplos que necesito","missingTheInformationSamplesINeed","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-31 (UTC)"],[],[],null,["# Getting the most out of Looker visualizations cookbook: Tooltip customization\n\n| **Note:** This page is part of the [Looker cookbook: Getting the most out of Looker visualizations](/looker/docs/best-practices/cookbook-visualizations-in-looker).\n| **Tip:** Starting in Looker 24.0, you can use the [Chart Config Editor](/looker/docs/chart-config-editor#customize_tooltip_color) to further customize tooltip style and color.\n\nThe [visualization tooltip](/looker/docs/creating-visualizations#the_visualization_tooltip) displays the value of the selected dimensions and measures by default and can help users understand the significance of a single point of data.\n\nFor example, a tooltip for a map visualization that is based on **Total Gross Margin** grouped by **State** will display values for both fields when a user hovers over the state of California.\n\nHowever, what if you want to include fields *other* than the default in the tooltip so that users can get more information or context about a datapoint without needing to look elsewhere?\n\nYou can customize the tooltip to display values from multiple specified fields --- including fields that are not in the Explore query.\n| **Caution:** HTML formatting only renders in [table](/looker/docs/table-options), [table (legacy)](/looker/docs/legacy-table-options), and [single value](/looker/docs/single-value-options) chart visualizations and in visualization tooltips when multiple fields are combined. Any interactive content that is placed in a [map chart's](/looker/docs/map-options#viewing_map_charts_in_the_new_dashboard_experience) tooltip with the `html` parameter will not be accessible on dashboards that use the [new dashboard experience](/looker/docs/viewing-dashboards), although the content will be accessible on Looks and Explores.\n\nIngredients\n-----------\n\n- [Liquid variables](/looker/docs/liquid-variable-reference) --- Liquid variables render the values of other fields in conjunction with the existing Explore query.\n- [`html` parameter](/looker/docs/reference/param-field-html) --- The fields that are defined in the `html` parameter of a measure will render in the tooltip when a user hovers over a visualization.\n- Visualization --- The tooltip will appear when a user hovers their cursor over a datapoint in certain visualization types.\n - [Cartesian charts](/looker/docs/visualization-guide#cartesian_charts)\n - [Pie or donut charts](/looker/docs/visualization-guide#pie_and_donut_charts)\n - [Progression charts](/looker/docs/visualization-guide#progression_charts)\n - [Map charts](/looker/docs/visualization-guide#maps)\n\nPrerequisites\n-------------\n\nCustomizing the tooltip requires the following:\n\n- Permissions to [create Explores](/looker/docs/admin-panel-users-roles#explore) and permissions to [develop LookML](/looker/docs/admin-panel-users-roles#develop).\n- Knowledge of SQL and LookML development.\n- A basic knowledge of using Liquid in Looker and HTML coding. Visit the [Using Liquid variables in the `html` parameter](/looker/docs/reference/param-field-html#using_liquid_variables_in_the_html_parameter) section of the [`html`](/looker/docs/reference/param-field-html) documentation page for necessary background information.\n- Permissions to [save content](/looker/docs/admin-panel-users-roles#save_content) (if you want to save the visualization as a Look or a dashboard)\n\nConsiderations for tooltip customization\n----------------------------------------\n\nIt is important to consider the following when you're customizing a tooltip:\n\n- The values in the `html` parameter become the y-axis of a visualization.\n- The value that you want to display on the y-axis should be the value in the `sql` parameter of the measure.\n- When you're using any formatted measure (a measure of `type: percent_of_total` or a measure with a `value_format_name` or `value_format` parameter), make sure to use the Liquid syntax for the rendered value `{{ field_name._rendered_value }}` (where `field_name` is the actual name of the measure or dimension).\n\nExample\n-------\n\n| **Note:** The example in this section extrapolates upon the example map **Total Gross Margin** grouped by **State** introduced earlier on this page.\n\nBy default, the tooltip for the visualization data points will include the values for **Total Gross Margin** and **State** . However, what if you wanted to provide users with additional information that is not indicated on the map or included in the Explore query? What if you wanted to include the value for a field called **Percent of Total Gross Margin** instead of **State** ? Including **Percent of Total Gross Margin** will help users understand how the **Total Gross Margin** value for an individual data point compares to the total gross margin across the data set.\n\nTo customize the tooltip, follow these steps: \n\n measure: total_gross_margin {\n type: sum\n value_format_name: decimal_2\n sql: ${gross_margin} ;;\n html: {{ rendered_value }} | {{percent_of_gross_margin._rendered_value }} of total ;;\n }\n\n1. In [**Development Mode**](/looker/docs/dev-mode-prod-mode#development_mode), navigate to the LookML definition for the field that you want to customize.\n\n You can navigate directly to a field's LookML definition [from an Explore](/looker/docs/creating-and-editing-explores#features_for_developers).\n2. Determine the fields and values that you want to include in the tooltip in addition to the original field. For example, **Percent of Total Gross Margin**.\n\n3. Add an `html` parameter to the original measure that is referenced in the Explore query and displayed in the tooltip. In this case, the measure that is currently in the Explore query and displayed in the tooltip is **Total Gross Margin**.\n\n4. In the `html` parameter, create an expression with Liquid variables that appends the additional fields to the existing measure's value.\n\n - This example uses the Liquid variable `_rendered_value` to display [Looker formatted values](/looker/docs/reference/param-field-value-format-name). For example, `total_gross_margin` uses Looker formatting for two decimals, and `percent_of_total_gross_margin` uses Looker formatting for percentage with two decimals.\n - You can use a pipe character,`|`, to separate the values for different fields.\n - You can also append other words that might clarify the meaning of the other values that are rendered in the tooltip. In this case, `of total` is added to clarify what the percentage value means.\n5. Save, validate, and push your code to production after verifying that it works as expected.\n\n| **Note:** The input of the `html` parameter only impacts how the value is rendered to users. It does *not* change the underlying value in the database.\n\nThe tooltip will now display two values when a user hovers over a data point with the tooltip: the `total_gross_margin` value of the data point, and the corresponding `percent_of_total_gross_margin` value.\n\nNext steps\n----------\n\nOnce you have created your visualization with a customized tooltip, you can share it with others:\n\n- [Save your Explore as a Look](/looker/docs/saving-and-editing-looks)\n- [Add the Explore to a dashboard](/looker/docs/creating-user-defined-dashboards#adding_query_tiles_from_an_explore)\n- [Share the Explore with a URL](/looker/docs/sharing-urls)"]]
