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 Visualisierungseinstellung Benutzerdefinierter Tooltip können Sie Tooltips im Visualisierungseditor von Explore konfigurieren. Dazu verwenden Sie eine Kombination aus UI-Einstellungen und einem HTML-Editor, der Liquid-Vorlagen unterstützt.

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

• Anforderungen an Nutzer und Instanzen
• Beschränkungen
• Benutzerdefinierte Tooltips verwenden
• Beispiele
• Weitere Informationen

Anforderungen an Nutzer und Instanzen

Um auf die Visualisierungseinstellung Benutzerdefinierte Tooltips zugreifen zu können, müssen die folgenden Anforderungen erfüllt sein:

• Auf Ihrer Looker-Instanz (Original) muss Looker 26.4 oder höher ausgeführt werden.
• 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

Für die Vorschaufunktion Benutzerdefinierte Tooltips gelten die folgenden Beschränkungen:

• Benutzerdefinierte Tooltips werden für die meisten Visualisierungstypen unterstützt, mit Ausnahme der folgenden:
  • Mehrfache Ringdiagramme
  • Wortwolken-Diagramme
  • Statische Karten (Regionen)
  • Statische Karten (Punkte)
  • Diagramme, die mit dem Diagrammkonfigurationseditor erstellt wurden (mit Ausnahme von Sankey-Diagrammen)
  • Benutzerdefinierte Visualisierungen
• 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 Drilldown-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 ist und sie das Feld wieder zur Explore-Abfrage hinzufügen.
• Gerenderter HTML-Code in benutzerdefinierten Tooltips unterliegt den HTML-Bereinigungsregeln von Looker.
• Möglicherweise werden nicht alle Liquid-Variablen für benutzerdefinierte Tooltips unterstützt.
• Anpassungen von Tooltips überschreiben alle Designs, die auf ein internes (nicht eingebettetes) Dashboard oder ein eingebettetes Dashboard angewendet werden.

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. Klicken Sie auf den Tab Reihe.
   • Klicken Sie bei Google Maps-Diagrammen und Boxplot-Diagrammen auf den Tab Diagramm und fahren Sie mit Schritt 5 fort.
   • Klicken Sie bei Wasserfalldiagrammen auf den Tab Reihe und fahren Sie mit Schritt 5 fort.
   • Klicken Sie bei Diagrammen mit einem einzelnen Wert und Diagrammen mit einem einzelnen Datensatz auf den Tab Stil und fahren Sie mit Schritt 5 fort.
   • Klicken Sie bei Trichterdiagrammen auf den Tab Labels und fahren Sie mit Schritt 5 fort.
   • Klicken Sie bei Zeitachsendiagrammen auf den Tab Optionen und fahren Sie mit Schritt 5 fort.
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. Klicken Sie auf die Schaltfläche Benutzerdefinierter Tooltip , um die Funktion für benutzerdefinierte Tooltips für diese bestimmte Reihe oder dieses bestimmte Diagramm zu aktivieren.
6. Im Bereich Benutzerdefinierter Tooltip können Sie das grundlegende Erscheinungsbild des Tooltips mit den folgenden Optionen anpassen:
   • Schriftgröße: Legt die Schriftgröße des Tooltips fest.
   • Schriftfamilie: Legt die Schriftfamilie des Tooltips fest.
   • Rahmenradius: Legt die Rundung der Tooltip-Kanten fest. Je höher die Zahl, desto runder die Tooltip-Kanten.
   • Schatten: Legt den Schatten des Tooltip-Felds fest.
   • Schriftfarbe: Legt die Schriftfarbe des Tooltips fest.
   • Hintergrundfarbe: Legt die Hintergrundfarbe des Tooltips fest.
   • Rahmenfarbe: Legt die Rahmenfarbe des Tooltips fest.
   • Textausrichtung: Legt die Ausrichtung der Tooltip-Schrift fest. Wählen Sie Links ausrichten, Zentriert ausrichten oder Rechts ausrichten aus. Links ausrichten ist die Standardeinstellung.
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 den 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.
   • Möglicherweise werden nicht alle Liquid-Variablen 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 Befehlstaste + Eingabetaste für Mac oder Strg + Eingabetaste für PC verwenden) und den Mauszeiger auf die Datenpunkte im Vorschaufenster der Visualisierung bewegen.

10. Klicken Sie im HTML-Editor auf Speichern und speichern Sie dann Ihren Explore 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
• Benutzerdefinierter Tooltip mit ausgeblendeten Werten, die als Tabelle strukturiert sind
• Benutzerdefinierter Tooltip mit häufig verwendeten Liquid-Funktionen

Benutzerdefinierter Tooltip mit mehreren Messwertwerten

Benutzerdefinierte Tooltips können hilfreich sein, wenn Sie Nutzern mehr Kontext zu einem Datenpunkt in einer Visualisierung bieten 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 bieten.

In diesem Beispiel wird in einem Diagramm mit einem einzelnen Wert mit dem Titel „Anzahl der Bestellungen im Jahr 2025“ der Wert für Anzahl der Bestellungen für das Land der Nutzer „USA“ angezeigt. 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>

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

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 werden in einem Säulendiagramm die Anzahl der Bestellungen nach Bestellstatus gruppiert angezeigt. Der Entwickler möchte den Tooltip so formatieren, dass Nutzer schnell den Unterschied zwischen der Anzahl der Bestellungen für einen Bestellstatus „ABGEBROCHEN“ und einen Bestellstatus „ABGESCHLOSSEN“ 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:

Hinweis: Um die Richtigkeit von bedingten Anweisungen zu gewährleisten, wenden Sie Datentransformationen während der Variablendeklaration an.

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

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

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

Weitere Informationen

• Mehr über das Erstellen von Visualisierungen erfahren
• Auf der Dokumentationsseite zur Referenz für Liquid-Variablen finden Sie weitere Informationen zur Verwendung von Liquid in Looker.
• Auf der Dokumentationsseite zur HTML-Bereinigung finden Sie weitere Informationen zu den von Looker unterstützten HTML-Tags.