Benutzerdefinierte Kurzinfos

Sie können die Kurzinfos anpassen, die angezeigt werden, wenn Nutzer den Mauszeiger auf Elemente in Looker-Visualisierungen bewegen. Mit benutzerdefinierten Kurzinfos können Sie mehr Kontext bereitstellen, zusätzliche Messwerte anzeigen und die Informationen anpassen, die Ihren Nutzern präsentiert werden. Mit der Visualisierungseinstellung Benutzerdefinierter Kurzinfo können Sie Kurzinfos auf dem Tab Stil des Explores (oder im Bearbeitungsmenü der Visualisierung für klassische Explores) 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 Kurzinfos in Ihrer Looker-Instanz (Original). Diese Seite enthält die folgenden Abschnitte:

Anforderungen an Nutzer und Instanzen

Damit Sie auf die Visualisierungseinstellung Benutzerdefinierte Kurzinfos zugreifen können, müssen die folgenden Anforderungen erfüllt sein:

  • Auf Ihrer Looker (Original)-Instanz muss Looker 26.4 oder höher ausgeführt werden.
  • Wenn Sie benutzerdefinierte Kurzinfos in Explores erstellen möchten, benötigen Sie die Berechtigung explore und Zugriff auf das zugrunde liegende LookML-Modell.

Beschränkungen

Für die Funktion Benutzerdefinierte Kurzinfos gelten die folgenden Einschränkungen:

Benutzerdefinierte Kurzinfos verwenden

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

  1. Öffnen oder erstellen Sie eine Explore-Abfrage und wählen Sie einen unterstützten Visualisierungstyp aus.
  2. Klicken Sie im Bereich Konfigurieren auf den Tab Stil, um die Visualisierung zu bearbeiten. Klicken Sie bei klassischen Explores auf dem Tab Visualisierung des Explores auf Bearbeiten, um den Visualisierungseditor zu öffnen.
  3. Öffnen Sie das Menü Reihe.
  4. Suchen Sie im Bereich Anpassungen die Reihe, der Sie die Kurzinfo hinzufügen möchten. Wenn es mehrere Reihen gibt, maximieren Sie die Reihe, der Sie einen Kurzinfo hinzufügen möchten.
  5. Klicken Sie auf den Schalter Benutzerdefinierte Kurzinfo, um die Funktion für die jeweilige Reihe oder das jeweilige Diagramm zu aktivieren.
  6. Im Bereich Benutzerdefinierte Kurzinfo können Sie das grundlegende Erscheinungsbild der Kurzinfo mit den folgenden Optionen anpassen:
    • Schriftgröße: Legt die Schriftgröße der Kurzinfo fest.
    • Schriftfamilie: Legt die Schriftfamilie der Kurzinfo fest.
    • Rahmenradius: Hier legen Sie die Rundung der Kurzinfo-Kanten fest. Je höher die Zahl, desto runder die Ecken der Kurzinfos.
    • Rahmenschatten: Hier legen Sie den Schatten des Kurzinfofelds fest.
    • Schriftfarbe: Legt die Schriftfarbe des Kurzinfos fest.
    • Hintergrundfarbe: Legt die Hintergrundfarbe des Kurzinfos fest.
    • Rahmenfarbe: Hier legen Sie die Rahmenfarbe der Kurzinfo fest.
    • Textausrichtung: Legt die Ausrichtung der Schriftart für die Kurzinfo fest. Wählen Sie Linksbündig, Zentriert oder Rechtsbündig aus. Linksbündig ist die Standardeinstellung.
  7. Zusätzlich oder alternativ zu den vorherigen Optionen können Sie erweiterte Stiloptionen anwenden, indem Sie auf Tooltip-Inhalt bearbeiten klicken, um den HTML-Editor Tooltip-Inhalt bearbeiten zu öffnen.

  8. Im Editor Kurzinfo-Inhalt bearbeiten können Sie HTML und Liquid-Variablen verwenden, um die Kurzinfo zu strukturieren und zu füllen.

    • Verwenden Sie Standard-HTML-Tags, um den Inhalt des Kurzinfos zu formatieren (z. B. <div>, <span>, <strong>, <table>, <ul>, <ol>). Beachten Sie, dass das gerenderte HTML den HTML-Bereinigungsregeln von Looker unterliegt.
    • Nicht alle Liquid-Variablen werden für benutzerdefinierte Kurzinfos unterstützt.

  9. Während Sie den Inhalt des benutzerdefinierten Kurzinfos bearbeiten, können Sie sich eine Vorschau der Kurzinfo ansehen. Klicken Sie dazu auf Vorschau (oder verwenden Sie die Tastenkombination „Befehlstaste + Eingabetaste“ für Mac oder „Strg + Eingabetaste“ für PC) und bewegen Sie den Mauszeiger auf die Datenpunkte im Vorschaubereich der Visualisierung.

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

Beispiele

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

Benutzerdefinierter Tooltip mit mehreren Messwerten

Benutzerdefinierte Kurzinfos 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 einzelnen Messwerts angezeigt. Mit einer benutzerdefinierten Kurzinfo können Sie mehr Daten anzeigen und Ihren Nutzern mehr Kontext zu den Daten im Diagramm bieten.

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 der Nutzer „USA“ an. Es basiert auf einer Explore-Abfrage, die auch Anzahl der Bestellpositionen enthält. Der Wert für Anzahl der bestellten Artikel wird jedoch nicht im Diagramm angezeigt.

Der folgende HTML-Code wird im Editor Kurzinfo-Inhalt bearbeiten für die Reihe Anzahl der Bestellungen eingegeben. Dadurch wird der Inhalt so festgelegt, dass der Wert Anzahl der Bestellartikel in der Kurzinfo enthalten ist:

<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 einer Kurzinfo für das Einzelwertdiagramm „Orders Count“ wird der Wert „Order Items Count“ von 54.340 $ und der Wert „Orders Count“ von 39.189 angezeigt.

Nutzer können die Werte für beide Felder, Orders Count und Order Items Count, sehen und haben mehr Kontext für die im Diagramm angezeigten Daten.

Benutzerdefinierter Tooltip mit ausgeblendeten Werten, die als Tabelle strukturiert sind

Wie in den Einschränkungen auf dieser Seite erwähnt, können benutzerdefinierte Kurzinfos nur auf Felder verweisen, die in einer Explore-Abfrage enthalten sind. Möglicherweise möchten Sie jedoch nicht alle Explore-Felder in einem Diagramm darstellen. Mit einem benutzerdefinierten Kurzinfo können Sie Ihren Nutzern Daten aus Feldern anzeigen, die 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 im 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 Kurzinfo-Inhalt bearbeiten für die Reihe Anzahl der Bestellungen eingegeben. Dadurch werden die Werte für Bestellstatus und Anzahl der Bestellartikel in der Kurzinfo als Tabelle strukturiert:

<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 Tabellendiagramm wird ein Kurzinfo für den Wert „Orders Count“ angezeigt. Es enthält die Werte für „Users State“, „Bestellstatus“, „Orders Count“ und „Order Items Count“ in einer zweispaltigen Tabelle.

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

Benutzerdefinierter Tooltip mit gängigen Liquid-Funktionen

Benutzerdefinierte Kurzinfos unterstützen gängige Liquid-Funktionen wie Piping und die Verwendung von Downcast-Anweisungen. In diesem Beispiel zeigt ein Säulendiagramm die Anzahl der Bestellungen gruppiert nach Bestellstatus. Der Entwickler möchte den Kurzinfo so formatieren, dass Nutzer schnell den Unterschied zwischen der Anzahl der Bestellungen für einen Bestellstatus „Storniert“ 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. Dadurch wird der Tooltip-Wert für Bestellungen mit dem Status „Storniert“ rot und für Bestellungen mit dem Status „Abgeschlossen“ grün angezeigt. Der Code verwendet eine Variablenzuweisung 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 == "complete" %}
  <span style="color:green">{{orders.count}}</span>
{% else %}
  <span style="color:red">{{orders.count}}</span>
{% endif %}

Der Wert Orders Count für die Spalte Bestellstatus mit dem Wert „complete“ wird im Kurzinfo in grünem Text angezeigt.

In einem Kurzinfo wird der Wert für die Anzahl der Bestellungen in der Spalte „Bestellstatus“ grün angezeigt.

Der Wert Orders Count für die Spalte Orders Status mit dem Wert „cancelled“ wird im Kurzinfo in rotem Text angezeigt.

In einem Kurzinfo wird der Wert für die Anzahl der Bestellungen in der Spalte „Bestellstatus“ grün angezeigt.

Die Nutzenden können im Säulendiagramm schnell zwischen stornierten und abgeschlossenen Bestellungen unterscheiden.