ユーザーが Looker のビジュアリゼーションの要素にカーソルを合わせたときに表示されるツールチップをカスタマイズできます。カスタマイズされたツールチップを使用すると、より多くのコンテキストを提供し、追加の指標を表示して、ユーザーに提示する情報をカスタマイズできます。[カスタム ツールチップ] の可視化設定を使用すると、UI 設定と Liquid テンプレートをサポートする HTML エディタを組み合わせて、Explore の [スタイル] タブ（または従来の Explore の可視化の [編集] メニュー）でツールチップを構成できます。
このページでは、Looker（オリジナル）インスタンスでカスタム ツールチップのビジュアリゼーション設定を有効にして使用する方法について説明します。このページは、以下のセクションで構成されています。
ユーザーとインスタンスの要件
[カスタム ツールチップ] の可視化設定にアクセスするには、次の要件を満たす必要があります。
- Looker（オリジナル）インスタンスが Looker 26.4 以降で実行されている必要があります。
- Explore でカスタム ツールチップを作成するには、
explore権限と、基になる LookML モデルへのアクセス権が必要です。
制限事項
カスタム ツールチップ機能には次の制限があります。
- カスタム ツールチップは、以下を除くほとんどのビジュアリゼーション タイプでサポートされています。
- 複数ドーナツグラフ
- ワードクラウド グラフ
- 静的マップ（リージョン）グラフ
- 静的マップ（ポイント）グラフ
- グラフ構成エディタを使用して作成されたグラフ（サンキーグラフを除く）
- カスタム ビジュアライゼーション
- カスタム ツールチップは、Explore クエリに含まれるフィールドのみを参照できます。
- ツールチップには、特定のフィールドと同じデータ粒度のみを表示できます。ツールチップに表示されるデータよりも詳細なデータを確認するには、ドリルダウン機能を使用する必要があります。
- カスタム ツールチップはビジュアリゼーション レベルで保存されます。Explore レベルでは保存できません。
- カスタム ツールチップを含む Explore クエリからフィールドを削除した場合でも、Explore クエリが共有され、ユーザーがフィールドを Explore クエリに戻すと、ユーザーはそのツールチップを引き続き表示できます。
- カスタム ツールチップでレンダリングされる HTML は、Looker の HTML サニタイズ ルールの対象となります。
- カスタム ツールチップでは、一部の Liquid 変数がサポートされていない場合があります。
- ツールチップのカスタマイズは、内部（埋め込みでない）ダッシュボードまたは埋め込みダッシュボードに適用されているテーマをオーバーライドします。
カスタム ツールチップの使用方法
適切な権限がある場合は、Explore のビジュアリゼーションで系列のツールチップをカスタマイズできます。ツールチップをカスタマイズする手順は次のとおりです。
- Explore クエリを開くか作成し、サポートされているビジュアリゼーション タイプを選択します。
- [構成] パネルの [スタイル] タブをクリックして、可視化を編集します。クラシック Explore の場合は、Explore の [ビジュアリゼーション] タブで [編集] をクリックして、ビジュアリゼーション エディタを開きます。
- [シリーズ] メニューを開きます。
- Google マップグラフと箱ひげ図グラフの場合は、[プロット] タブをクリックし、ステップ 5 に進みます。
- ウォーターフォール グラフの場合は、[系列] メニューをクリックして、ステップ 5 に進みます。
- KPI（単一の値）グラフ、単一の値（レガシー）グラフ、単一レコードグラフの場合は、[スタイル] メニューをクリックして、ステップ 5 に進みます。
- ファネルグラフの場合は、[ラベル] メニューをクリックして、ステップ 5 に進みます。
- タイムライン グラフの場合は、[オプション] メニューをクリックし、ステップ 5 に進みます。
- [カスタマイズ] セクションで、ツールチップを追加する系列を見つけます。複数の系列がある場合は、ツールチップを追加する系列を開きます。
- [カスタム ツールチップ] スイッチをクリックして、特定の系列またはグラフのカスタム ツールチップ機能を有効にします。
- [カスタム ツールチップ] セクションでは、次のオプションを使用してツールチップの基本的な外観を調整できます。
- フォントサイズ: ツールチップのフォントサイズを設定します。
- フォント ファミリー: ツールチップのフォント ファミリーを設定します。
- 枠線の半径: ツールチップの角の丸みを設定します。数値が大きいほど、ツールチップの角が丸くなります。
- ボックス シャドウ: ツールチップ ボックスのシャドウを設定します。
- フォントの色: ツールチップのフォントの色を設定します。
- 背景色: ツールチップの背景色を設定します。
- 枠線の色: ツールチップの枠線の色を設定します。
- テキストの配置: ツールチップのフォントの配置を設定します。[左揃え]、[中央揃え]、[右揃え] のいずれかを選択します。デフォルトの設定は [左揃え] です。
- 上記のオプションに加えて、またはその代わりに、[ツールチップのコンテンツを編集] をクリックして [ツールチップのコンテンツを編集] HTML エディタを開き、より高度なスタイル設定オプションを適用できます。
[Edit Tooltip Content] エディタでは、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 年の注文数」というタイトルの単一値グラフに、ユーザーの国「USA」の注文数の値が表示されています。これは、注文アイテム数も含む Explore クエリに基づいています。ただし、注文アイテム数の値はグラフに表示されません。
次の HTML は、Orders Count シリーズの Edit Tooltip Content エディタに入力され、ツールチップに Order Items Count 値を含めるようにコンテンツを設定します。
<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.cn/static/looker/docs/images/looker-custom-tooltip-example-1-2620.png?hl=ja)
ユーザーは、[注文数] と [注文アイテム数] の両方のフィールドの値を確認でき、グラフに表示されるデータのコンテキストをより詳しく把握できます。
非表示の値がテーブルとして構造化されたカスタム ツールチップ
このページの制限事項に記載されているように、カスタム ツールチップは Explore クエリに含まれるフィールドのみを参照できます。ただし、Explore のすべてのフィールドをグラフに表示したくない場合もあります。カスタム ツールチップを使用すると、ビジュアリゼーションで非表示になっているフィールドのデータを、グラフに追加することなくユーザーに表示できます。
この例では、Explore データテーブルに、[Orders Count] と [Order Items Count] のメジャーが含まれており、[Users State] と [Orders Status] の注文ステータスのディメンションでグループ化されています。デベロッパーは、ユーザーに小さなテーブルを表示し、テーブルグラフから [注文ステータス] フィールドと [Order Items Count] フィールドを非表示にしたいと考えています。ただし、デベロッパーは、特定の注文数に関連付けられた注文ステータスと注文アイテム数の値をユーザーに表示したいと考えています。
次の HTML は、[Orders Count] 系列の [Edit Tooltip Content] エディタに入力され、ツールチップに [注文ステータス] と [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 列の表で表示されています。](https://docs.cloud.google.cn/static/looker/docs/images/looker-custom-tooltip-example-2-2620.png?hl=ja)
ユーザーは、テーブルグラフに表示される追加フィールドなしで、すべての Explore クエリデータを表示できます。
一般的な Liquid 関数を使用したカスタム ツールチップ
カスタム ツールチップは、パイピングやダウンキャスト ステートメントの使用など、一般的な Liquid 関数をサポートしています。この例では、縦棒グラフに [注文数] が [注文ステータス] ごとにグループ化されて表示されています。開発者は、注文ステータスが「キャンセル」の注文数と、注文ステータスが「完了」の注文数の違いをユーザーがすぐに識別できるように、ツールチップの書式を設定したいと考えています。
次の HTML と Liquid は、[Orders Count] シリーズの [Edit Tooltip Content] エディタに入力され、ステータスが「cancelled」の注文数のツールチップ値を赤色で表示し、ステータスが「complete」の注文数のツールチップ値を緑色で表示するように設定します。このコードでは、変数の代入とパイプを使用して、文字列の正確性を確保し、指定された条件付き書式を適用しています。
{% 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 %}
「完了」の注文ステータス列の注文件数値は、ツールチップに緑色のテキストで表示されます。
[注文ステータス] 列の「cancelled」の [Orders Count] 値は、ツールチップに赤色のテキストで表示されます。
ユーザーは、縦棒グラフに表示されるキャンセルされた注文と完了した注文をすばやく区別できます。
関連資料
- ビジュアリゼーションの作成の詳細を確認する。
- Looker で Liquid を使用する方法については、Liquid 変数リファレンスのドキュメント ページをご覧ください。
- Looker でサポートされている HTML タグの詳細については、HTML のサニタイズのドキュメント ページをご覧ください。