Descrizioni comando personalizzate

Puoi personalizzare i tooltip che vengono visualizzati quando gli utenti passano il mouse sopra gli elementi nelle visualizzazioni di Looker. I tooltip personalizzati ti consentono di fornire più contesto, visualizzare metriche aggiuntive e personalizzare le informazioni presentate agli utenti. Con l'impostazione di visualizzazione Tooltip personalizzato, puoi configurare i tooltip nella scheda Stile di Esplora (o nel menu Modifica della visualizzazione per le esplorazioni classiche) utilizzando una combinazione di impostazioni dell'interfaccia utente e un editor HTML che supporta i modelli Liquid.

Questa pagina fornisce indicazioni per l'attivazione e l'utilizzo dell'impostazione di visualizzazione Tooltip personalizzati nell'istanza di Looker (originale). Questa pagina include le seguenti sezioni:

Requisiti per utenti e istanze

Per accedere all'impostazione di visualizzazione Tooltip personalizzati, devi soddisfare i seguenti requisiti:

  • L'istanza di Looker (originale) deve eseguire Looker 26.4 o versioni successive.
  • Per creare tooltip personalizzati nelle esplorazioni, devi disporre dell'autorizzazione explore e dell'accesso al modello LookML sottostante.

Limitazioni

La funzionalità Tooltip personalizzati presenta le seguenti limitazioni:

Come utilizzare i tooltip personalizzati

Se disponi delle autorizzazioni appropriate, puoi personalizzare il tooltip per una serie nella visualizzazione Esplora. Per personalizzare la descrizione comando:

  1. Apri o crea una query di Esplora e seleziona un tipo di visualizzazione supportato.
  2. Fai clic sulla scheda Stile nel riquadro Configura per modificare la visualizzazione. Per le esplorazioni classiche, fai clic su Modifica nella scheda Visualizzazione di Esplora per aprire l'editor di visualizzazione.
  3. Apri il menu Serie.
  4. Nella sezione Personalizzazioni, trova la serie a cui vuoi aggiungere il tooltip. Se sono presenti più serie, espandi quella a cui vuoi aggiungere un tooltip.
  5. Fai clic sull'opzione Tooltip personalizzato per attivare la funzionalità di tooltip personalizzato per la serie o il grafico specifico.
  6. Nella sezione Descrizione comando personalizzata, puoi modificare l'aspetto di base della descrizione comando utilizzando le opzioni fornite:
    • Dimensioni carattere: imposta la dimensione del carattere del tooltip.
    • Famiglia di caratteri: imposta la famiglia di caratteri del carattere del tooltip.
    • Raggio bordo: imposta l'arrotondamento dei bordi della descrizione comando. Più elevato è il numero, più arrotondati saranno i bordi della descrizione comando.
    • Ombra riquadro: imposta l'ombra della casella della descrizione comando.
    • Colore carattere: imposta il colore del carattere della descrizione comando.
    • Colore di sfondo: imposta il colore di sfondo del tooltip.
    • Colore bordo: imposta il colore del bordo della descrizione comando.
    • Allineamento testo: imposta l'allineamento del carattere della descrizione comando. Scegli Allinea a sinistra, Centra o Allinea a destra. Allinea a sinistra è l'impostazione predefinita.
  7. In aggiunta o in alternativa alle opzioni precedenti, puoi applicare opzioni di stile più avanzate facendo clic su Modifica contenuto del tooltip per aprire l'editor HTML Modifica contenuto del tooltip.

  8. Nell'editor Modifica i contenuti del tooltip, puoi utilizzare HTML e variabili Liquid per strutturare e compilare il tooltip.

    • Utilizza i tag HTML standard per formattare i contenuti del tooltip (ad esempio <div>, <span>, <strong>, <table>,<ul>, <ol>). Tieni presente che l'HTML visualizzato è soggetto alle regole di sanificazione HTML di Looker.
    • Non tutte le variabili Liquid potrebbero essere supportate per i tooltip personalizzati.

  9. Mentre modifichi i contenuti del tooltip personalizzato, puoi visualizzarne l'anteprima facendo clic su Anteprima (o sulle scorciatoie da tastiera Comando-Invio per Mac o Ctrl+Invio per PC) e passando il mouse sopra i punti dati nel riquadro di anteprima della visualizzazione.

  10. Fai clic su Salva nell'editor HTML, quindi salva l'esplorazione come Look o come riquadro della dashboard per rendere permanenti le modifiche.

Esempi

I seguenti esempi mostrano i casi d'uso per diversi livelli di personalizzazione dei tooltip:

Tooltip personalizzato con più valori di misura

Le descrizioni comando personalizzate possono essere utili nei casi in cui vuoi fornire agli utenti un contesto più ampio su un punto dati visualizzato in una visualizzazione. Ad esempio, un grafico a valore singolo mostra il valore di una sola misura. Con un tooltip personalizzato, puoi visualizzare più dati e fornire agli utenti un contesto più ampio sui dati nel grafico.

In questo esempio, un grafico a valore singolo intitolato "Count of orders in 2025" (Conteggio degli ordini nel 2025) mostra il valore di Orders Count (Conteggio degli ordini) per Users Country (Paese degli utenti) "USA" e si basa su una query di Explore che include anche Order Items Count (Conteggio degli articoli dell'ordine). Tuttavia, il valore di Numero di articoli nell'ordine non viene visualizzato nel grafico.

Il seguente codice HTML viene inserito nell'editor Modifica i contenuti del tooltip per la serie Orders Count e imposta i contenuti in modo da includere il valore Order Items Count nel tooltip:

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

Un tooltip per il grafico a valore singolo Numero di ordini mostra il valore Numero di articoli dell'ordine pari a 54.340 $e il valore Numero di ordini pari a 39.189.

Gli utenti possono visualizzare i valori di entrambi i campi, Orders Count e Order Items Count, e avere più contesto per i dati visualizzati nel grafico.

Tooltip personalizzato con valori nascosti strutturati come tabella

Come indicato nelle informazioni sulle limitazioni in questa pagina, i tooltip personalizzati possono fare riferimento solo ai campi inclusi in una query di esplorazione. Tuttavia, potresti non voler visualizzare tutti i campi di Esplora in un grafico. Con una descrizione comando personalizzata, puoi mostrare agli utenti i dati dei campi nascosti dalle visualizzazioni senza aggiungerli a un grafico.

In questo esempio, una tabella di dati di Explore include le misure Conteggio ordini e Conteggio articoli dell'ordine, raggruppate in base alle dimensioni Stato degli utenti e Stato degli ordini. Lo sviluppatore vuole mostrare una piccola tabella agli utenti e nasconde i campi Stato dell'ordine e Conteggio articoli dell'ordine dal grafico a tabella. Tuttavia, lo sviluppatore vuole comunque che gli utenti visualizzino i valori Stato degli ordini e Conteggio articoli degli ordini associati a un determinato Conteggio ordini.

Il seguente codice HTML viene inserito nell'editor Modifica i contenuti del tooltip per la serie Orders Count e imposta i contenuti in modo da includere i valori di stato dell'ordine e Order Items Count nel tooltip, strutturato come tabella:

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

Un tooltip per il valore Conteggio ordini in un grafico a tabella mostra i valori per Stato degli utenti, Stato degli ordini, Conteggio ordini e Conteggio articoli dell'ordine in una tabella a due colonne.

Gli utenti possono visualizzare tutti i dati delle query di Esplora, senza i campi aggiuntivi visualizzati nel grafico a tabella.

Tooltip personalizzato con funzioni Liquid comuni

I tooltip personalizzati supportano le funzioni Liquid comuni, come il piping e l'utilizzo di istruzioni di downcast. In questo esempio, un grafico a colonne mostra il Conteggio ordini raggruppato per stato dell'ordine. Lo sviluppatore vuole formattare la descrizione comando in modo che gli utenti possano identificare rapidamente la differenza tra il conteggio degli ordini per uno stato degli ordini "annullato" e uno stato degli ordini "completato".

Il seguente codice HTML e Liquid viene inserito nell'editor Modifica i contenuti del tooltip per la serie Numero di ordini e imposta il valore del tooltip in modo che venga visualizzato in rosso per i numeri di ordini con stato "annullato" e in verde per gli ordini con stato "completato". Il codice utilizza un'assegnazione di variabili e il piping per garantire l'accuratezza della stringa e applicare la formattazione condizionale specificata:

{% assign my_variable = orders.status | downcase | strip %}
{% if my_variable == "complete" %}
  <span style="color:green">{{orders.count}}</span>
{% else %}
  <span style="color:red">{{orders.count}}</span>
{% endif %}

Il valore Orders Count per la colonna Orders Status "complete" mostra il testo verde nella descrizione comando.

Un tooltip mostra il valore del numero di ordini in verde nella colonna Stato dell'ordine completato.

Il valore Numero di ordini per la colonna Stato dell'ordine "Annullato" mostra il testo in rosso nel tooltip.

Un tooltip mostra il valore del numero di ordini in verde nella colonna Stato dell'ordine completato.

Gli utenti possono distinguere rapidamente tra ordini annullati e completati visualizzati nel grafico a colonne.