Guia de práticas recomendadas para aproveitar ao máximo as visualizações do Looker: personalização de dicas
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
A dica de visualização mostra o valor das dimensões e medidas selecionadas por padrão e pode ajudar os usuários a entender a importância de um único ponto de dados.
Por exemplo, uma dica de ferramenta para uma visualização de mapa com base na Margem bruta total agrupada por Estado vai mostrar os valores dos dois campos quando um usuário passar o cursor sobre o estado da Califórnia.
No entanto, e se você quiser incluir campos diferentes do padrão na dica de ferramenta para que os usuários tenham mais informações ou contexto sobre um ponto de dados sem precisar procurar em outro lugar?
É possível personalizar a dica de ferramenta para mostrar valores de vários campos especificados, incluindo campos que não estão na consulta da Análise detalhada.
Ingredientes
Variáveis líquidas: as variáveis líquidas renderizam os valores de outros campos em conjunto com a consulta de Análises.
Parâmetro html: os campos definidos no parâmetro html de uma medida são renderizados na dica de ferramenta quando o usuário passa o cursor sobre uma visualização.
Visualização: a dica aparece quando o cursor é passado sobre um ponto de dados em determinados tipos de visualização.
Conhecimento básico de uso do Liquid no Looker e codificação em HTML. Acesse a seção Como usar variáveis do Liquid no parâmetro html da página de documentação html para conferir as informações de contexto necessárias.
Permissões para salvar conteúdo (se você quiser salvar a visualização como um visual ou um painel)
Considerações sobre a personalização de dicas
É importante considerar o seguinte ao personalizar uma dica:
Os valores no parâmetro html se tornam o eixo y de uma visualização.
O valor que você quer mostrar no eixo y precisa ser o valor no parâmetro sql da medida.
Ao usar qualquer medida formatada (uma medida de type: percent_of_total ou uma medida com um parâmetro value_format_name ou value_format), use a sintaxe do Liquid para o valor renderizado {{ field_name._rendered_value }} (em que field_name é o nome real da medida ou dimensão).
Exemplo
Por padrão, a dica de ferramentas dos pontos de dados da visualização inclui os valores de Margem bruta total e Estado. No entanto, e se você quiser fornecer aos usuários informações adicionais que não estão indicadas no mapa ou incluídas na consulta da seção "Explorar"? E se você quiser incluir o valor de um campo chamado Percentual da margem bruta total em vez de Estado? Incluir a Porcentagem da margem bruta total ajuda os usuários a entender como o valor da margem bruta total de um ponto de dados individual se compara à margem bruta total do conjunto de dados.
Para personalizar a dica, siga estas etapas:
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 ;;
}
No modo de desenvolvimento, navegue até a definição do LookML para o campo que você quer personalizar.
Determine os campos e valores que você quer incluir na dica de ferramentas, além do campo original. Por exemplo, Porcentagem da margem bruta total.
Adicione um parâmetro html à medida original que é referenciada na consulta "Explorar" e exibida na dica. Nesse caso, a métrica que está na consulta "Explorar" e exibida na dica é Margem bruta total.
No parâmetro html, crie uma expressão com variáveis do Liquid que anexa os campos adicionais ao valor da medida atual.
Este exemplo usa a variável _rendered_value do Liquid para mostrar valores formatados do Looker. Por exemplo, total_gross_margin usa a formatação do Looker para dois decimais, e percent_of_total_gross_margin usa a formatação do Looker para porcentagem com dois decimais.
Você pode usar uma barra vertical,|, para separar os valores de campos diferentes.
Também é possível anexar outras palavras que possam esclarecer o significado dos outros valores renderizados na dica. Nesse caso, of total é adicionado para esclarecer o significado do valor percentual.
Salve, valide e envie seu código para produção depois de verificar se ele funciona como esperado.
A dica vai mostrar dois valores quando um usuário passar o cursor sobre um ponto de dados com a dica: o valor total_gross_margin do ponto de dados e o valor percent_of_total_gross_margin correspondente.
Próximas etapas
Depois de criar uma visualização com uma dica personalizada, você pode compartilhar com outras pessoas:
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Difícil de entender","hardToUnderstand","thumb-down"],["Informações incorretas ou exemplo de código","incorrectInformationOrSampleCode","thumb-down"],["Não contém as informações/amostras de que eu preciso","missingTheInformationSamplesINeed","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 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)"]]