Looker の可視化でユーザーが要素にカーソルを合わせたときに表示されるツールチップをカスタマイズできます。ツールチップをカスタマイズすると、より多くのコンテキストを提供し、追加の指標を表示して、ユーザーに表示される情報を調整できます。カスタム ツールチップ Labs 機能を使用すると、Explore の可視化エディタ内でツールチップを構成できます。これは、UI 設定と Liquid テンプレートをサポートする HTML エディタを組み合わせて行います。
このページでは、Looker（オリジナル）インスタンスで カスタム ツールチップ Labs 機能を有効にして使用する方法について説明します。このページは、以下のセクションで構成されています。
フィードバックの提供またはサポートの利用
フィードバックを提供したり、サポートをリクエストしたりするには、このLooker カスタム ツールチップ - プレビューの問題フォームに記入して送信してください。
ユーザーとインスタンスの要件
カスタム ツールチップ Labs 機能を有効にして使用するには、次の要件を満たす必要があります。
- Looker（オリジナル）インスタンスが Looker 26.0 以降で実行されており、Looker ホスト型である必要があります。
- 管理者ロールが必要です。カスタム ツールチップ Labs 機能を有効にするには
- Explore でカスタム ツールチップを作成するには、
explore権限と、基盤となる LookML モデルへのアクセス権が必要です。
制限事項
カスタム ツールチップ Labs 機能には次の制限があります。
- カスタム ツールチップは、表グラフ、単一値グラフ、およびデカルト図でのみサポートされています。円グラフ、箱ひげ図、ウォーターフォール グラフでは、カスタム ツールチップはサポートされていません。
- カスタム ツールチップは、Explore クエリに含まれるフィールドのみを参照できます。
- ツールチップには、特定のフィールドと同じデータ粒度しか表示できません。ツールチップで利用可能なデータよりも詳細なレベルのデータを表示する場合は、ドリルダウン機能を使用する必要があります。
- カスタム ツールチップは可視化レベルで保存されます。Explore レベルでは保存できません。
- カスタム ツールチップを含む Explore クエリからフィールドを削除した場合でも、Explore クエリが共有されていて、フィールドを Explore クエリに追加し直すと、そのツールチップが表示されます。
- カスタム ツールチップでレンダリングされた HTML は、Looker の HTML サニタイズ ルールに従います。
- カスタム ツールチップでは、一部の Liquid 変数がサポートされない場合があります。
- ツールチップのカスタマイズは、内部（埋め込みでない）ダッシュボードまたは埋め込みダッシュボードに適用されているテーマをオーバーライドします。
カスタム ツールチップを有効にする
カスタム ツールチップ Labs 機能はデフォルトで有効になっています。
カスタム ツールチップ Labs 機能が以前に無効にされている場合は、Looker 管理者は次の手順で カスタム ツールチップ Labs 機能を有効にできます。
- Looker で、[メイン ナビゲーション メニュー]の [管理者]オプションをクリックします。
- [**全般**] セクションの [**Labs**] オプションをクリックして、[**Labs**] ページを開きます。
- [カスタム ツールチップ] 切り替えスイッチを選択して、Labs 機能を有効にします。
カスタム ツールチップの使用方法
適切な権限があれば、Explore の可視化で系列のツールチップをカスタマイズできます。ツールチップをカスタマイズする手順は次のとおりです。
- Explore クエリを開くか作成して、サポートされている可視化タイプを選択します。
- Explore の [**可視化**] タブで [**編集**] をクリックして、[**可視化エディタ**] を開きます。
- [系列] タブを選択します。
- [カスタマイズ] セクションで、ツールチップを追加する系列を見つけます。複数の系列がある場合は、ツールチップを追加する系列を開きます。
- [カスタム ツールチップ] スイッチを選択して、その特定の系列のカスタム ツールチップ機能を有効にします。
- [カスタム ツールチップ] セクションで、用意されているオプションを使用してツールチップの基本的な外観を調整できます。
- フォントサイズ: ツールチップのフォントサイズを設定します。
- フォント ファミリー: ツールチップのフォント ファミリーを設定します。
- ツールチップの背景色: ツールチップの背景色を設定します。
- フォントの色: ツールチップのフォントの色を設定します。
- 境界の半径: ツールチップの端の丸みを設定します。数値が大きいほど、ツールチップの端が丸くなります。
- 枠線の影: ツールチップの影を設定します。
- テキストの配置: ツールチップのフォントの配置を設定します。
- 上記のオプションに加えて、または上記のオプションの代わりに、[ツールチップ コンテンツを編集] をクリックして [ツールチップ コンテンツを編集] HTML エディタを開き、より高度なスタイル設定オプションを適用できます。
[ツールチップ コンテンツを編集] エディタで、HTML と Liquid 変数 を使用してツールチップを構造化して入力できます。
- 標準の HTML タグを使用して、ツールチップ コンテンツの書式を設定します（
<div>、<span>、<strong>、<table>、<ul>、<ol>など）。レンダリングされた HTML は、Looker の HTML サニタイズ ルールに従います。 - カスタム ツールチップでは、一部の Liquid 変数がサポートされない場合があります。
- 標準の HTML タグを使用して、ツールチップ コンテンツの書式を設定します（
カスタム ツールチップ コンテンツを編集したら、[プレビュー]（Mac の場合は Command-Return、PC の場合は Ctrl+Enter）をクリックして、可視化プレビュー ペインのデータポイントにカーソルを合わせると、ツールチップをプレビューできます。
HTML エディタで [保存] をクリックし、Explore を Look または ダッシュボード タイル として保存して、変更を保持します。
例
次の例では、さまざまなレベルのツールチップのカスタマイズのユースケースを示します。
複数の指標値を含むカスタム ツールチップ
カスタム ツールチップは、可視化に表示されるデータポイントに関するコンテキストをユーザーに提供する場合に便利です。たとえば、単一値グラフには 1 つの指標の値のみが表示されます。カスタム ツールチップを使用すると、より多くのデータを表示し、グラフ内のデータに関するコンテキストをユーザーに提供できます。
この例では、「2025 年の注文数」というタイトルの単一値グラフに、[ユーザーの国] が「米国」の [注文数] の値が表示されます。これは、[注文アイテム数] も含む 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 が表示されます。](https://docs.cloud.google.com/static/looker/docs/images/looker-custom-tooltip-example-1.png?hl=ja)
ユーザーは、[注文数] と [注文アイテム数] の両方のフィールドの値を確認でき、グラフに表示されるデータのコンテキストを把握できます。
表形式で構造化された非表示の値を含むカスタム ツールチップ
このページの制限事項で説明したように、カスタム ツールチップは 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 列の表で表示されています。](https://docs.cloud.google.com/static/looker/docs/images/looker-custom-tooltip-example-2.png?hl=ja)
ユーザーは、表グラフに追加のフィールドを表示せずに、Explore クエリのすべてのデータを表示できます。
一般的な Liquid 関数を含むカスタム ツールチップ
カスタム ツールチップは、パイプ処理やダウンキャスト ステートメントの使用など、一般的な Liquid 関数をサポートしています。この例では、縦棒グラフに [注文ステータス] でグループ化された [注文数] が表示されます。デベロッパーは、[注文ステータス] が「キャンセル」の [注文数] と「完了」の [注文ステータス] の違いをユーザーがすばやく識別できるように、ツールチップの書式を設定したいと考えています。
次の HTML と Liquid は、[ツールチップ コンテンツを編集] エディタで [注文数] 系列に入力され、"CANCELLED" ステータスの注文数のツールチップ値が赤で表示され、"COMPLETED" ステータスの注文数のツールチップ値が緑で表示されるように設定します。このコードでは、変数割り当てとパイプ処理を使用して、文字列の正確性を確保し、指定された条件付き書式を適用します。
{% 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] の値が緑色で表示されています。](https://docs.cloud.google.com/static/looker/docs/images/looker-custom-tooltip-example-3a.png?hl=ja)
[注文ステータス] が「キャンセル」の [注文数] 列の値は、ツールチップに赤色のテキストで表示されます。
![ツールチップに、[COMPLETED] の [Orders Status] 列の [Orders Count] の値が緑色で表示されています。](https://docs.cloud.google.com/static/looker/docs/images/looker-custom-tooltip-example-3b.png?hl=ja)
ユーザーは、縦棒グラフに表示されるキャンセルされた注文と完了した注文をすばやく区別できます。
関連リソース
- 可視化の作成について詳しくは、こちらをご覧ください。
- Looker で Liquid を使用するその他の方法については、Liquid 変数リファレンス ドキュメント ページをご覧ください。
- Looker でサポートされている HTML タグについて詳しくは、HTML サニタイズのドキュメント ページをご覧ください。