Dicas personalizadas

É possível personalizar as dicas que aparecem quando os usuários passam o cursor sobre os elementos nas visualizações do Looker. As dicas personalizadas permitem oferecer mais contexto, mostrar métricas adicionais e adaptar as informações apresentadas aos usuários. O recurso de laboratório Dicas personalizadas permite configurar dicas no editor de visualização do Explorar usando uma combinação de configurações UI e um editor HTML que oferece suporte a modelos do Liquid.

Esta página oferece orientações para ativar e usar o recurso de laboratórioDicas personalizadas na instância do Looker (original). Esta página inclui as seguintes seções:

Enviar feedback ou receber suporte

Você pode enviar feedback ou solicitar suporte preenchendo e enviando este formulário Looker Custom Tooltips - Preview Issues.

Requisitos de usuário e instância

Para ativar e usar o recurso de laboratório Dicas personalizadas, você precisa atender aos seguintes requisitos:

  • A instância do Looker (original) precisa estar executando o Looker 26.0 ou uma versão mais recente e ser hospedada pelo Looker.
  • Você precisa ter o papel de administrador para ativar o recurso de laboratório Dicas personalizadas.
  • Para criar dicas personalizadas no Explorar, você precisa ter a permissão explore e acesso ao modelo LookML subjacente.

Limitações

O recurso de laboratório Dicas personalizadas tem as seguintes limitações:

  • As dicas personalizadas são compatíveis apenas com gráficos de tabela, de valor único e cartesianos. Elas não são compatíveis com gráficos de pizza, de caixa ou de cascata.
  • As dicas personalizadas só podem referenciar campos incluídos em uma consulta do Explorar.
  • As dicas só podem mostrar a mesma granularidade de dados de um determinado campo. Se os usuários quiserem ver um nível de dados mais granular do que o disponível na dica, eles precisarão usar a funcionalidade de detalhamento.
  • As dicas personalizadas são salvas no nível da visualização. Elas não podem ser salvas no nível do Explorar.
  • Se você remover um campo de uma consulta do Explorar que tenha uma dica personalizada, o usuário ainda poderá ver essa dica se a consulta do Explorar for compartilhada com ele e ele adicionar o campo de volta à consulta.
  • O HTML renderizado em dicas personalizadas está sujeito às regras de higienização de HTML do Looker.
  • Nem todas as variáveis do Liquid podem ser compatíveis com dicas personalizadas.
  • As personalizações de dicas vão substituir qualquer tema aplicado a um painel interno (não incorporado) ou a um painel incorporado.

Ativar dicas personalizadas

O recurso de laboratório Dicas personalizadas está ativado por padrão.

Se o recurso de laboratório Dicas personalizadas tiver sido desativado anteriormente, os administradores do Looker poderão ativá-lo seguindo estas etapas:

  1. No Looker, clique na opção Admin no menu de navegação principal.
  2. Clique na opção Labs na seção Geral para abrir a página Labs.
  3. Selecione o botão Dicas personalizadas para ativar o recurso de laboratório.

Como usar dicas personalizadas

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

  1. Abra ou crie uma consulta do Explorar e selecione um tipo de visualização compatível.
  2. Clique em Editar na guia Visualização do Explorar para abrir o editor de visualização.
  3. Selecione a guia Série.
  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 a que você quer adicionar uma dica.
  5. Selecione o botão Dica personalizada para ativar a funcionalidade de dica personalizada para essa série específica.
  6. Na seção Dica personalizada, é possível ajustar 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.
    • Cor de fundo da dica: define a cor de fundo da dica.
    • Cor da fonte: define a cor da fonte 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 na borda: define a sombra da dica.
    • Alinhamento do texto: define o alinhamento da fonte da dica.
  7. Além das opções anteriores, 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, é possível usar variáveis HTML e 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 higienização de HTML do Looker.
    • Nem todas as variáveis do Liquid podem ser compatíveis com dicas personalizadas.

  9. Ao editar o conteúdo da dica personalizada, você pode visualizar a dica clicando em Visualizar (ou nos atalhos de teclado Command-Return para Mac ou Ctrl+Enter para PC) e passando o cursor sobre os pontos de dados no painel de visualização.

  10. Clique em Salvar no editor HTML e salve a análise 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 medida

As dicas personalizadas podem ser úteis em casos em que você quer oferecer mais contexto aos usuários sobre um ponto de dados exibido em uma visualização. Por exemplo, um gráfico de valor único mostra o valor de apenas uma medida. Com uma dica personalizada, é possível mostrar mais dados e oferecer aos usuários mais contexto sobre os dados no gráfico.

Neste exemplo, um gráfico de valor único intitulado "Contagem de pedidos em 2025" mostra o valor de Contagem de pedidos para o País dos usuários "EUA" e é baseado em uma consulta do Explorar que também inclui Contagem de itens de pedido. No entanto, o valor de Contagem de itens de pedido não é mostrado 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 de 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 ver os valores dos dois campos, Contagem de pedidos e Contagem de itens de pedido, e ter mais contexto para os dados mostrados no gráfico.

Dica personalizada com valores ocultos estruturados como uma tabela

Conforme observado nas informações de limitações desta página, as dicas personalizadas só podem referenciar campos incluídos em uma consulta do Explorar. No entanto, talvez você não queira mostrar todos os campos do Explorar em um gráfico. Com uma dica personalizada, é possível mostrar dados de campos que estão ocultos das visualizações para os usuários, sem adicioná-los a um gráfico.

Neste exemplo, uma tabela de dados do Explorar inclui as medidas Contagem de pedidos e Contagem de itens de 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 de 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 de 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 de 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 Explorar, sem os campos adicionais mostrados no gráfico de tabela.

Dica personalizada com funções comuns do Liquid

As dicas personalizadas oferecem suporte a funções comuns do Liquid, como canalização e uso de instruções de conversão. 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 para um Status dos pedidos "CANCELADO" e um Status dos 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 um status "CANCELADO" e em verde para pedidos com um status "CONCLUÍDO". O código usa uma atribuição de variável e canalização 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 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 "CANCELADO" 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.

  • Saiba mais sobre como criar visualizações.
  • Consulte a página de documentação de referência de variáveis do Liquid para mais maneiras de usar o Liquid no Looker.
  • Consulte a página de documentação de higienização de HTML para mais informações sobre as tags HTML com suporte do Looker.