Benutzerdefinierte Kurzinfos

Sie können die Tooltips anpassen, die angezeigt werden, wenn Nutzer den Mauszeiger auf Elemente in Looker-Visualisierungen bewegen. Mit benutzerdefinierten Tooltips können Sie mehr Kontext bereitstellen, zusätzliche Messwerte anzeigen und die Informationen anpassen, die Ihren Nutzern präsentiert werden. Mit der Labs-Funktion Benutzerdefinierte Tooltips können Sie Tooltips im Visualisierungseditor von Explore mithilfe einer Kombination aus UI-Einstellungen und einem HTML-Editor konfigurieren, der Liquid-Vorlagen unterstützt.

Auf dieser Seite finden Sie eine Anleitung zum Aktivieren und Verwenden der Labs-Funktion**Benutzerdefinierte Tooltips** in Ihrer Looker-Instanz (Original). Diese Seite enthält die folgenden Abschnitte:

Feedback geben oder Support erhalten

Sie können Feedback geben oder Support anfordern, indem Sie dieses Formular zu Problemen mit benutzerdefinierten Tooltips in Looker (Vorschau) ausfüllen und einreichen.

Anforderungen an Nutzer und Instanzen

Damit Sie die Labs-Funktion Benutzerdefinierte Tooltips aktivieren und verwenden können, müssen die folgenden Anforderungen erfüllt sein:

  • Auf Ihrer Looker-Instanz (Original) muss Looker 26.0 oder höher ausgeführt werden und sie muss von Looker gehostet werden.
  • Sie benötigen die Rolle „Administrator“, um die Labs-Funktion „Benutzerdefinierte Tooltips“ zu aktivieren.
  • Wenn Sie benutzerdefinierte Tooltips in Explores erstellen möchten, benötigen Sie die explore Berechtigung und Zugriff auf das zugrunde liegende LookML-Modell.

Beschränkungen

Die Labs-Funktion Benutzerdefinierte Tooltips unterliegt den folgenden Beschränkungen:

  • Benutzerdefinierte Tooltips werden nur für Tabellendiagramme, Diagramme mit einem einzelnen Wert und kartesische Diagramme unterstützt. Benutzerdefinierte Tooltips werden nicht für Kreisdiagramme, Boxplots oder Wasserfalldiagramme unterstützt.
  • Benutzerdefinierte Tooltips können nur auf Felder verweisen, die in einer Explore-Abfrage enthalten sind.
  • In Tooltips kann nur dieselbe Datengranularität wie in einem bestimmten Feld angezeigt werden. Wenn Nutzer eine detailliertere Datenebene sehen möchten, als im Tooltip verfügbar ist, müssen sie die Drill-down-Funktion verwenden.
  • Benutzerdefinierte Tooltips werden auf Visualisierungsebene gespeichert. Sie können nicht auf Explore-Ebene gespeichert werden.
  • Wenn Sie ein Feld aus einer Explore-Abfrage mit einem benutzerdefinierten Tooltip entfernen, können Nutzer diesen Tooltip weiterhin sehen, wenn die Explore-Abfrage für sie freigegeben wurde und sie das Feld wieder zur Explore-Abfrage hinzufügen.
  • Gerenderter HTML-Code in benutzerdefinierten Tooltips unterliegt den HTML-Bereinigungsregeln von Looker.
  • Nicht alle Liquid-Variablen werden möglicherweise für benutzerdefinierte Tooltips unterstützt.
  • Anpassungen von Tooltips überschreiben alle Designs, die entweder auf ein internes (nicht eingebettetes) Dashboard oder ein eingebettetes Dashboard angewendet werden.

Benutzerdefinierte Tooltips aktivieren

Die Labs-Funktion Benutzerdefinierte Tooltips ist standardmäßig aktiviert.

Wenn die Labs-Funktion Benutzerdefinierte Tooltips zuvor deaktiviert wurde, können Looker-Administratoren sie so aktivieren:

  1. Klicken Sie in Looker im Hauptmenü auf die Option Verwaltung.
  2. Klicken Sie im Bereich Allgemein auf die Option Labs , um die Seite Labs zu öffnen.
  3. Wählen Sie die Ein/Aus-Schaltfläche Benutzerdefinierte Tooltips aus, um die Labs-Funktion zu aktivieren.

Benutzerdefinierte Tooltips verwenden

Wenn Sie die entsprechenden Berechtigungen haben, können Sie den Tooltip für eine Reihe in Ihrer Explore-Visualisierung anpassen. So passen Sie den Tooltip an:

  1. Öffnen oder erstellen Sie eine Explore-Abfrage und wählen Sie einen unterstützten Visualisierungstyp aus.
  2. Klicken Sie auf dem Tab Visualisierung von Explore auf Bearbeiten , um den Visualisierungseditor zu öffnen.
  3. Wählen Sie den Tab Reihen aus.
  4. Suchen Sie im Bereich Anpassungen die Reihe, der Sie den Tooltip hinzufügen möchten. Wenn mehrere Reihen vorhanden sind, maximieren Sie die Reihe, der Sie einen Tooltip hinzufügen möchten.
  5. Wählen Sie die Schaltfläche Benutzerdefinierter Tooltip aus, um die Funktion für benutzerdefinierte Tooltips für diese bestimmte Reihe zu aktivieren.
  6. Im Bereich Benutzerdefinierter Tooltip können Sie die grundlegende Darstellung des Tooltips mit den folgenden Optionen anpassen:
    • Schriftgröße: Legt die Schriftgröße des Tooltip-Texts fest.
    • Schriftfamilie: Legt die Schriftfamilie des Tooltip-Texts fest.
    • Hintergrundfarbe des Tooltips: Legt die Hintergrundfarbe des Tooltips fest.
    • Schriftfarbe: Legt die Schriftfarbe des Tooltips fest.
    • Rahmenradius: Legt die Rundung der Tooltip-Kanten fest. Je höher die Zahl, desto runder die Tooltip-Kanten.
    • Rahmen mit Schatten: Legt den Schatten des Tooltips fest.
    • Textausrichtung: Legt die Ausrichtung des Tooltip-Texts fest.
  7. Zusätzlich oder alternativ zu den vorherigen Optionen können Sie erweiterte Formatierungsoptionen anwenden. Klicken Sie dazu auf Tooltip-Inhalt bearbeiten, um den HTML-Editor Tooltip-Inhalt bearbeiten zu öffnen.
  8. Im Editor Tooltip-Inhalt bearbeiten können Sie HTML und Liquid-Variablen verwenden, um Ihren Tooltip zu strukturieren und zu füllen.

    • Verwenden Sie Standard-HTML-Tags, um den Tooltip-Inhalt zu formatieren (z. B. <div>, <span>, <strong>, <table>,<ul>, <ol>). Der gerenderte HTML-Code unterliegt den HTML-Bereinigungsregeln von Looker.
    • Nicht alle Liquid-Variablen werden möglicherweise für benutzerdefinierte Tooltips unterstützt.
  9. Während Sie den benutzerdefinierten Tooltip-Inhalt bearbeiten, können Sie eine Vorschau des Tooltips aufrufen, indem Sie auf Vorschau klicken (oder die Tastenkombination Befehl + Eingabetaste für Mac oder Strg + Eingabetaste für PC verwenden) und den Mauszeiger auf die Datenpunkte im Bereich „Vorschau der Visualisierung“ bewegen.

  10. Klicken Sie im HTML-Editor auf Speichern und speichern Sie dann Ihre Explore-Abfrage als Look oder als Dashboard-Kachel, um die Änderungen beizubehalten.

Beispiele

Die folgenden Beispiele veranschaulichen Anwendungsfälle für verschiedene Stufen der Tooltip-Anpassung:

Benutzerdefinierter Tooltip mit mehreren Messwertwerten

Benutzerdefinierte Tooltips können hilfreich sein, wenn Sie Nutzern mehr Kontext zu einem Datenpunkt in einer Visualisierung geben möchten. In einem Diagramm mit einem einzelnen Wert wird beispielsweise nur der Wert eines Messwerts angezeigt. Mit einem benutzerdefinierten Tooltip können Sie mehr Daten anzeigen und Ihren Nutzern mehr Kontext zu den Daten im Diagramm geben.

In diesem Beispiel zeigt ein Diagramm mit einem einzelnen Wert mit dem Titel „Anzahl der Bestellungen im Jahr 2025“ den Wert für Anzahl der Bestellungen für das Land des Nutzers „USA“. Es basiert auf einer Explore-Abfrage, die auch Anzahl der Bestellartikel enthält. Der Wert für Anzahl der Bestellartikel wird jedoch nicht im Diagramm angezeigt.

Der folgende HTML-Code wird im Editor Tooltip-Inhalt bearbeiten für die Reihe Anzahl der Bestellungen eingegeben und legt fest, dass der Wert Anzahl der Bestellartikel im Tooltip enthalten sein soll:

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

In der Kurzinfo für das Einzelwertdiagramm „Anzahl der Bestellungen“ wird der Wert „Anzahl der Bestellpositionen“ von 54.340 € und der Wert „Anzahl der Bestellungen“ von 39.189 angezeigt.

Nutzer können die Werte für beide Felder, Anzahl der Bestellungen und Anzahl der Bestellartikel, sehen und haben mehr Kontext für die Daten, die im Diagramm angezeigt werden.

Benutzerdefinierter Tooltip mit ausgeblendeten Werten, die als Tabelle strukturiert sind

Wie in den Beschränkungen auf dieser Seite erwähnt, können benutzerdefinierte Tooltips nur auf Felder verweisen, die in einer Explore-Abfrage enthalten sind. Möglicherweise möchten Sie jedoch nicht alle Explore-Felder in einem Diagramm anzeigen. Mit einem benutzerdefinierten Tooltip können Sie Daten aus Feldern anzeigen, die für Ihre Nutzer in Visualisierungen ausgeblendet sind, ohne sie einem Diagramm hinzuzufügen.

In diesem Beispiel enthält eine Explore-Datentabelle die Messwerte Anzahl der Bestellungen und Anzahl der Bestellartikel, gruppiert nach den Dimensionen Bundesstaat des Nutzers und Bestellstatus. Der Entwickler möchte Nutzern eine kleine Tabelle anzeigen und blendet die Felder Bestellstatus und Anzahl der Bestellartikel aus dem Tabellendiagramm aus. Der Entwickler möchte jedoch, dass Nutzer die Werte für Bestellstatus und Anzahl der Bestellartikel sehen, die mit einer bestimmten Anzahl der Bestellungen verknüpft sind.

Der folgende HTML-Code wird im Editor Tooltip-Inhalt bearbeiten für die Reihe Anzahl der Bestellungen eingegeben und legt fest, dass die Werte für Bestellstatus und Anzahl der Bestellartikel im Tooltip als Tabelle strukturiert enthalten sein sollen:

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

In einem Kurzinfo-Fenster für den Wert „Anzahl der Bestellungen“ in einem Tabellendiagramm werden die Werte für „Bundesstaat“, „Bestellstatus“, „Anzahl der Bestellungen“ und „Anzahl der Bestellartikel“ in einer zweispaltigen Tabelle angezeigt.

Nutzer können alle Daten der Explore-Abfrage sehen, ohne dass die zusätzlichen Felder im Tabellendiagramm angezeigt werden.

Benutzerdefinierter Tooltip mit häufig verwendeten Liquid-Funktionen

Benutzerdefinierte Tooltips unterstützen häufig verwendete Liquid-Funktionen wie Piping und Downcast-Anweisungen. In diesem Beispiel zeigt ein Säulendiagramm die Anzahl der Bestellungen, gruppiert nach Bestellstatus. Der Entwickler möchte den Tooltip so formatieren, dass Nutzer den Unterschied zwischen der Anzahl der Bestellungen für einen Bestellstatus „ABGEBROCHEN“ und einen Bestellstatus „ABGESCHLOSSEN“ schnell erkennen können.

Der folgende HTML- und Liquid-Code wird im Editor Tooltip-Inhalt bearbeiten für die Reihe Anzahl der Bestellungen eingegeben und legt fest, dass der Tooltip-Wert für Bestellungen mit dem Status „ABGEBROCHEN“ rot und für Bestellungen mit dem Status „ABGESCHLOSSEN“ grün angezeigt werden soll. Der Code verwendet eine Variablendeklaration und Piping, um die Richtigkeit des Strings zu gewährleisten und die angegebene bedingte Formatierung anzuwenden:

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

Der Wert für Anzahl der Bestellungen für die Spalte Bestellstatus „ABGESCHLOSSEN“ wird im Tooltip in grüner Schrift angezeigt.

In einem Kurzinfo-Fenster wird der Wert „Anzahl der Bestellungen“ in der Spalte „Status der ABGESCHLOSSENEN Bestellungen“ grün angezeigt.

Der Wert für Anzahl der Bestellungen für die Spalte Bestellstatus „ABGEBROCHEN“ wird im Tooltip in roter Schrift angezeigt.

In einem Kurzinfo-Fenster wird der Wert „Anzahl der Bestellungen“ in der Spalte „Status der ABGESCHLOSSENEN Bestellungen“ grün angezeigt.

Nutzer können schnell zwischen abgebrochenen und abgeschlossenen Bestellungen unterscheiden, die im Säulendiagramm angezeigt werden.

  • Weitere Informationen zum Erstellen von Visualisierungen.
  • Auf der Dokumentationsseite zur Referenz für Liquid-Variablen finden Sie weitere Möglichkeiten, Liquid in Looker zu verwenden.
  • Auf der Dokumentationsseite zur HTML-Bereinigung finden Sie weitere Informationen zu den von Looker unterstützten HTML-Tags.