カスタム ツールチップ

Looker の可視化で要素にカーソルを合わせたときに表示されるツールチップをカスタマイズできます。ツールチップをカスタマイズすると、コンテキストをより詳細に提供したり、追加の指標を表示したり、ユーザーに表示する情報を調整したりできます。カスタム ツールチップの可視化設定を使用すると、探索の可視化エディタ内で、UI 設定と Liquid テンプレートをサポートする HTML エディタを組み合わせてツールチップを構成できます。

このページでは、Looker（オリジナル）インスタンスで [カスタム ツールチップ] ビジュアリゼーション設定を有効にして使用する方法について説明します。このページは、以下のセクションで構成されています。

ユーザーとインスタンスの要件

カスタム ツールチップの可視化設定にアクセスするには、次の要件を満たす必要があります。

  • Looker（オリジナル）インスタンスが Looker 26.4 以降で実行されている必要があります。
  • Explore でカスタム ツールチップを作成するには、explore 権限と、基盤となる LookML モデルへのアクセス権が必要です。

制限事項

カスタム ツールチップのプレビュー機能には次の制限があります。

カスタム ツールチップの使用方法

適切な権限があれば、Explore の可視化で系列のツールチップをカスタマイズできます。ツールチップをカスタマイズする手順は次のとおりです。

  1. データ探索クエリを開くか作成して、サポートされている可視化タイプを選択します。
  2. Explore の [Visualization] タブで [Edit] をクリックして、可視化エディタを開きます。
  3. [シリーズ] タブをクリックします。
  4. [カスタマイズ] セクションで、ツールチップを追加する系列を見つけます。複数の系列がある場合は、ツールチップを追加する系列を展開します。
  5. [カスタム ツールチップ] スイッチをクリックして、特定の系列またはグラフのカスタム ツールチップ機能を有効にします。
  6. [カスタム ツールチップ] セクションでは、用意されているオプションを使用して、ツールチップの基本的な外観を調整できます。
    • フォントサイズ: ツールチップのフォントのサイズを設定します。
    • フォント ファミリー: ツールチップのフォントのフォント ファミリーを設定します。
    • 枠線の角丸半径: ツールチップの枠線の角丸半径を設定します。数値が大きいほど、ツールチップの角が丸くなります。
    • Box Shadow: ツールチップ ボックスの影を設定します。
    • フォントの色: ツールチップのフォントの色を設定します。
    • 背景色: ツールチップの背景色を設定します。
    • 枠線の色: ツールチップの枠線の色を設定します。
    • テキストの配置: ツールチップのフォントの配置を設定します。[左揃え]、[中央揃え]、[右揃え] のいずれかを選択します。デフォルトの設定は [左揃え] です。
  7. 前のオプションに加えて、または前のオプションの代わりに、[Edit Tooltip Content] をクリックして Edit tooltip content HTML エディタを開き、より高度なスタイル設定オプションを適用することもできます。

  8. [Edit Tooltip Content] エディタでは、HTML と Liquid 変数を使用して、ツールチップの構造を設定し、データを入力できます。

    • 標準の HTML タグを使用して、ツールチップのコンテンツの形式を設定します（<div>、<span>、<strong>、<table>、<ul>、<ol> など）。レンダリングされた HTML は、Looker の HTML サニタイズ ルールの対象となります。
    • カスタム ツールチップでは、一部の Liquid 変数がサポートされない場合があります。

  9. カスタム ツールチップのコンテンツを編集する際に、[プレビュー]（または、Mac の場合は Command+Return、PC の場合は Ctrl+Enter のキーボード ショートカット）をクリックし、ビジュアリゼーションのプレビュー ペインでデータポイントにカーソルを合わせると、ツールチップをプレビューできます。

  10. HTML エディタで [保存] をクリックし、Explore を Look としてまたはダッシュボード タイルとして保存して、変更を保持します。

例

次の例は、さまざまなレベルのツールチップのカスタマイズのユースケースを示しています。

複数の指標値を含むカスタム ツールチップ

カスタム ツールチップは、可視化に表示されるデータポイントについてユーザーに詳細なコンテキストを提供する場合に役立ちます。たとえば、単一値グラフには 1 つの指標の値のみが表示されますが、カスタム ツールチップを使用すると、より多くのデータを表示して、グラフ内のデータに関するコンテキストをユーザーに提供できます。

この例では、「2025 年の注文数」というタイトルの単一値グラフに、ユーザーの国が「USA」の注文数の値が表示されています。このグラフは、注文アイテム数も含む Explore クエリに基づいています。ただし、注文アイテム数の値はグラフに表示されません。

次の HTML は、[注文数] 系列の [ツールチップのコンテンツを編集] エディタに入力され、ツールチップに [注文アイテム数] の値を含めるようにコンテンツを設定します。

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

[注文数] の単一値グラフのツールチップには、[注文アイテム数] の値 $54,340 と [注文数] の値 39,189 が表示されます。

ユーザーは [注文数] と [注文アイテム数] の両方のフィールドの値を確認でき、グラフに表示されるデータのコンテキストをより深く理解できます。

非表示の値が表形式で表示されるカスタム ツールチップ

このページの制限事項に記載されているように、カスタム ツールチップで参照できるのは、Explore クエリに含まれているフィールドのみです。ただし、Explore のすべてのフィールドをグラフに表示する必要はありません。カスタム ツールチップを使用すると、グラフに追加することなく、ビジュアリゼーションで非表示になっているフィールドのデータをユーザーに表示できます。

この例では、Explore のデータテーブルに、ディメンション [ユーザーの州] と [注文ステータス] でグループ化されたメジャー [注文数] と [注文アイテム数] が含まれています。デベロッパーは、ユーザーに小さなテーブルを表示したいと考えており、テーブルグラフから [注文ステータス] フィールドと [注文アイテム数] フィールドを非表示にしています。ただし、デベロッパーは、特定の [注文数] に関連付けられている [注文ステータス] と [注文アイテム数] の値をユーザーに表示したいと考えています。

次の HTML は、[注文数] 系列の [ツールチップのコンテンツを編集] エディタに入力され、ツールチップに [注文ステータス] と [注文アイテム数] の値を含むコンテンツをテーブルとして構造化して設定します。

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

表形式のグラフの [注文数] の値のツールチップに、[ユーザーの州]、[注文ステータス]、[注文数]、[注文アイテム数] の値が 2 列の表で表示されています。

ユーザーは、テーブルグラフに追加のフィールドが表示されなくても、Explore クエリのすべてのデータを表示できます。

一般的な Liquid 関数を使用したカスタム ツールチップ

カスタム ツールチップは、パイプ処理やダウンキャスト ステートメントの使用など、一般的な Liquid 関数をサポートしています。この例では、縦棒グラフに Orders Status でグループ化された Orders Count が表示されています。デベロッパーは、ユーザーが「キャンセル」の Orders Status と「完了」の Orders Status の Orders Count の違いをすばやく識別できるように、ツールチップの形式を設定したいと考えています。

次の HTML と Liquid は、[注文数] 系列の [ツールチップのコンテンツを編集] エディタに入力され、ステータスが「キャンセル」の注文数のツールチップ値が赤色で表示され、ステータスが「完了」の注文数のツールチップ値が緑色で表示されるように設定されます。コードは、変数割り当てとパイプ処理を使用して、文字列の精度を確保し、指定された条件付き書式を適用します。

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

[COMPLETED] の Orders Status 列の Orders Count の値が、ツールチップに緑色のテキストで表示されます。

ツールチップに、[COMPLETED] の [Orders Status] 列の [Orders Count] の値が緑色で表示されています。

[キャンセル済み] の [注文ステータス] 列の [注文数] の値が、ツールチップに赤いテキストで表示されます。

ツールチップに、[COMPLETED] の [Orders Status] 列の [Orders Count] の値が緑色で表示されています。

ユーザーは、縦棒グラフに表示されたキャンセル済み注文と完了済み注文をすばやく区別できます。

  • 詳しくは、可視化の作成に関する記事をご覧ください。
  • Looker で Liquid を使用するその他の方法については、Liquid 変数リファレンスのドキュメント ページをご覧ください。
  • Looker でサポートされている HTML タグの詳細については、HTML のサニタイズのドキュメント ページをご覧ください。