カスタム ツールチップ

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

このページでは、Looker（オリジナル）インスタンスでカスタム ツールチップ Labs 機能を有効にして使用するためのガイダンスを提供します。このページは、以下のセクションで構成されています。

フィードバックを送信する、サポートを受ける

フィードバックを送信したり、サポートをリクエストしたりするには、Looker カスタム ツールチップ - プレビューの問題フォームに記入して送信してください。

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

カスタム ツールチップ Labs 機能を有効にして使用するには、次の要件を満たす必要があります。

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

制限事項

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

  • カスタム ツールチップは、表グラフ、単一値グラフ、デカルト図でのみサポートされています。円グラフ、箱ひげ図、ウォーターフォール チャートでは、カスタム ツールチップはサポートされていません。
  • カスタム ツールチップでは、Explore クエリに含まれるフィールドのみを参照できます。
  • ツールチップに表示できるのは、指定されたフィールドと同じデータ粒度のみです。ツールチップで表示されるよりも詳細なデータを確認する場合は、ドリルダウン機能を使用する必要があります。
  • カスタム ツールチップは、可視化レベルで保存されます。Explore レベルで保存することはできません。
  • カスタムのツールチップがある Explore クエリからフィールドを削除しても、Explore クエリが共有されているユーザーがそのフィールドを Explore クエリに追加し直せば、ツールチップは表示されます。
  • カスタム ツールチップでレンダリングされた HTML は、Looker の HTML サニタイズ ルールの対象となります。
  • カスタム ツールチップでは、一部の Liquid 変数がサポートされない場合があります。
  • ツールチップのカスタマイズは、内部（埋め込みではない）ダッシュボードまたは埋め込みダッシュボードに適用されているテーマをオーバーライドします。

カスタム ツールチップを有効にする

カスタム ツールチップ Labs 機能はデフォルトで有効になっています。

[カスタム ツールチップ] Labs 機能が以前に無効になっている場合は、Looker 管理者は次の手順で [カスタム ツールチップ] Labs 機能を有効にできます。

  1. Looker で、メイン ナビゲーション メニューの [管理者] オプションをクリックします。
  2. [全般] セクションの [Labs] オプションをクリックして、Labs ページを開きます。
  3. [カスタム ツールチップ] 切り替えスイッチを選択して、Labs 機能を有効にします。

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

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

  1. データ探索クエリを開くか作成して、サポートされている可視化タイプを選択します。
  2. Explore の [Visualization] タブで [Edit] をクリックして、可視化エディタを開きます。
  3. [Series] タブを選択します。
  4. [カスタマイズ] セクションで、ツールチップを追加する系列を見つけます。複数の系列がある場合は、ツールチップを追加する系列を開きます。
  5. [カスタム ツールチップ] スイッチを選択して、その特定の系列のカスタム ツールチップ機能を有効にします。
  6. [カスタム ツールチップ] セクションでは、用意されているオプションを使用して、ツールチップの基本的な外観を調整できます。
    • フォントサイズ: ツールチップのフォントのサイズを設定します。
    • フォント ファミリー: ツールチップのフォントのフォント ファミリーを設定します。
    • ツールチップの背景色: ツールチップの背景色を設定します。
    • フォントの色: ツールチップのフォントの色を設定します。
    • 枠線の角丸半径: ツールチップの枠線の角丸半径を設定します。数値が大きいほど、ツールチップの角が丸くなります。
    • 枠線の影: ツールチップの影を設定します。
    • Text Alignment: ツールチップのフォントの配置を設定します。
  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 のデータテーブルに、ディメンション [Users State] と [Orders Status] でグループ化された measure [Orders Count] と [Order Items Count] が含まれています。デベロッパーは、ユーザーに小さなテーブルを表示したいと考えており、テーブルグラフから [Orders Status] フィールドと [Order Items Count] フィールドを非表示にしています。ただし、デベロッパーは、特定の [注文数] に関連付けられている [注文ステータス] と [注文アイテム数] の値をユーザーに表示したいと考えています。

次の HTML は、[Orders Count] 系列の [ツールチップ コンテンツの編集] エディタに入力され、ツールチップに [Orders Status] と [Order Items Count] の値を含むコンテンツをテーブルとして構造化して設定します。

<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 関数をサポートしています。この例では、縦棒グラフに [注文数] が [注文ステータス] ごとにグループ化されて表示されています。デベロッパーは、ユーザーが「キャンセル済み」の注文ステータスと「完了」の注文ステータスの注文数の違いをすばやく確認できるように、ツールチップの形式を設定したいと考えています。

次の 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] 列に、注文件数の値が緑色でツールチップに表示されています。

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

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

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

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