Dicas personalizadas

É possível personalizar as dicas que aparecem quando os usuários passam o cursor sobre os elementos nas visualizações do Looker. Com as dicas personalizadas, você pode fornecer mais contexto, mostrar outras métricas e adaptar as informações apresentadas aos usuários. Com a configuração de visualização Dica personalizada, é possível configurar dicas no editor de visualização da análise detalhada usando uma combinação de configurações da UI e um editor HTML compatível com modelos Liquid.

Esta página fornece orientações para ativar e usar a configuração de visualização Dicas de ferramentas personalizadas na sua instância do Looker (original). Esta página inclui as seguintes seções:

Requisitos de usuário e instância

Para acessar a configuração de visualização Dicas personalizadas, você precisa atender aos seguintes requisitos:

  • Sua instância do Looker (original) precisa estar executando o Looker 26.4 ou uma versão mais recente.
  • Para criar dicas personalizadas nas análises detalhadas, você precisa ter a permissão explore e acesso ao modelo da LookML.

Limitações

O recurso de prévia Dicas personalizadas tem as seguintes limitações:

Como usar dicas personalizadas

Se você tiver as permissões adequadas, poderá personalizar a dica de ferramenta de uma série na visualização do recurso Detalhar. Para personalizar a dica, siga estas etapas:

  1. Abra ou crie uma consulta de análise detalhada e selecione um tipo de visualização compatível.
  2. Clique em Editar na guia Visualização da análise detalhada para abrir o editor de visualização.
  3. Clique na guia Séries.
  4. Na seção Personalizações, encontre a série a que você quer adicionar a dica. Se houver várias séries, expanda aquela em que você quer adicionar uma dica.
  5. Clique no botão Dica personalizada para ativar a funcionalidade de dica personalizada para essa série ou gráfico específico.
  6. Na seção Dica personalizada, ajuste a aparência básica da dica usando as opções fornecidas:
    • Tamanho da fonte: define o tamanho da fonte da dica.
    • Família de fontes: define a família de fontes da dica.
    • Raio da borda: define o arredondamento das bordas da dica. Quanto maior o número, mais arredondadas serão as bordas da dica.
    • Sombra da caixa: define a sombra da caixa de dica.
    • Cor da fonte: define a cor da fonte da dica.
    • Cor do plano de fundo: define a cor do plano de fundo da dica.
    • Cor da borda: define a cor da borda da dica.
    • Alinhamento do texto: define o alinhamento da fonte da dica. Escolha Alinhar à esquerda, Alinhar ao centro ou Alinhar à direita. Alinhar à esquerda é a configuração padrão.
  7. Além das opções anteriores, ou como alternativa a elas, você pode aplicar opções de estilo mais avançadas clicando em Editar conteúdo da dica para abrir o editor HTML Editar conteúdo da dica.

  8. No editor Editar conteúdo da dica, use HTML e variáveis Liquid para estruturar e preencher a dica.

    • Use tags HTML padrão para formatar o conteúdo da dica (por exemplo, <div>, <span>, <strong>, <table>,<ul>, <ol>). O HTML renderizado está sujeito às regras de limpeza de HTML do Looker.
    • Nem todas as variáveis Liquid são compatíveis com dicas personalizadas.

  9. Ao editar o conteúdo da dica personalizada, clique em Visualizar (ou use os atalhos de teclado Command-Return no Mac ou Ctrl+Enter no PC) e passe o cursor sobre os pontos de dados no painel de visualização.

  10. Clique em Salvar no editor HTML e salve a análise detalhada como um Look ou como um bloco do painel para manter as mudanças.

Exemplos

Os exemplos a seguir demonstram casos de uso para diferentes níveis de personalização de dicas:

Dica personalizada com vários valores de métricas

As dicas personalizadas podem ser úteis quando você quer dar mais contexto aos usuários sobre um ponto de dados mostrado em uma visualização. Por exemplo, um gráfico de valor único mostra o valor de apenas uma métrica. Com uma dica personalizada, você pode mostrar mais dados e oferecer aos usuários mais contexto sobre as informações no gráfico.

Neste exemplo, um gráfico de valor único chamado "Count of orders in 2025" mostra o valor de Contagem de pedidos para o País dos usuários "USA" e é baseado em uma consulta do recurso Detalhar que também inclui Contagem de itens do pedido. No entanto, o valor de Contagem de itens do pedido não aparece no gráfico.

O HTML a seguir é inserido no editor Editar conteúdo da dica para a série Contagem de pedidos e define o conteúdo para incluir o valor Contagem de itens do pedido na dica:

<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>

Uma dica de ferramenta para o gráfico de valor único &quot;Contagem de pedidos&quot; mostra o valor de &quot;Contagem de itens de pedidos&quot; de US $54.340 e o valor de &quot;Contagem de pedidos&quot; de 39.189.

Os usuários podem conferir os valores dos dois campos, Contagem de pedidos e Contagem de itens do pedido, e ter mais contexto sobre os dados mostrados no gráfico.

Dica personalizada com valores ocultos estruturados como uma tabela

Conforme observado nas informações sobre limitações nesta página, as dicas personalizadas só podem fazer referência a campos incluídos em uma consulta do recurso Detalhar. No entanto, talvez você não queira mostrar todos os campos da análise detalhada em um gráfico. Com uma dica personalizada, você pode mostrar dados de campos ocultos das visualizações aos usuários sem adicioná-los a um gráfico.

Neste exemplo, uma tabela de dados de análise inclui as métricas Contagem de pedidos e Contagem de itens do pedido, agrupadas pelas dimensões Estado dos usuários e Status dos pedidos. O desenvolvedor quer mostrar uma pequena tabela aos usuários e oculta os campos Status dos pedidos e Contagem de itens do pedido do gráfico de tabela. No entanto, o desenvolvedor ainda quer que os usuários vejam os valores de Status dos pedidos e Contagem de itens do pedido associados a uma determinada Contagem de pedidos.

O HTML a seguir é inserido no editor Editar conteúdo da dica para a série Contagem de pedidos e define o conteúdo para incluir os valores de Status dos pedidos e Contagem de itens do pedido na dica, estruturados como uma tabela:

<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>

Uma dica para o valor &quot;Contagem de pedidos&quot; em um gráfico de tabela mostra os valores de &quot;Estado dos usuários&quot;, &quot;Status dos pedidos&quot;, &quot;Contagem de pedidos&quot; e &quot;Contagem de itens do pedido&quot; em uma tabela de duas colunas.

Os usuários podem ver todos os dados da consulta do recurso Detalhar sem os campos extras mostrados no gráfico de tabela.

Dica personalizada com funções comuns do Liquid

As dicas personalizadas são compatíveis com funções comuns do Liquid, como encadeamento e uso de instruções de downcast. Neste exemplo, um gráfico de colunas mostra a Contagem de pedidos agrupada por Status dos pedidos. O desenvolvedor quer formatar a dica para que os usuários possam identificar rapidamente a diferença entre a contagem de pedidos de um status de pedidos "CANCELADO" e um status de pedidos "CONCLUÍDO".

O HTML e o Liquid a seguir são inseridos no editor Editar conteúdo da dica para a série Contagem de pedidos e definem o valor da dica para aparecer em vermelho para contagens de pedidos com status "CANCELADO" e em verde para pedidos com status "CONCLUÍDO". O código usa uma atribuição de variável e um encadeamento para garantir a precisão da string e aplicar a formatação condicional especificada:

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

O valor Contagem de pedidos da coluna Status dos pedidos "CONCLUÍDO" mostra um texto verde na dica.

Uma dica mostra o valor da contagem de pedidos em verde na coluna &quot;Status dos pedidos CONCLUÍDOS&quot;.

O valor Contagem de pedidos da coluna Status dos pedidos "CANCELLED" mostra texto vermelho na dica.

Uma dica mostra o valor da contagem de pedidos em verde na coluna &quot;Status dos pedidos CONCLUÍDOS&quot;.

Os usuários podem distinguir rapidamente entre pedidos cancelados e concluídos mostrados no gráfico de colunas.