カスタム ツールチップ

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

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

• ユーザーとインスタンスの要件
• 制限事項
• カスタム ツールチップの使用方法
• 例
• 関連リソース

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

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

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

制限事項

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

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

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

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

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

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

   • 標準の HTML タグを使用して、ツールチップのコンテンツの形式を設定します（
     、、、、

     、
     など）。レンダリングされた HTML は、Looker の HTML サニタイズ ルールの対象となります。
     1. カスタム ツールチップでは、一部の Liquid 変数がサポートされない場合があります。

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

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

     例

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

     • 複数の指標値を含むカスタム ツールチップ
     • 表として構造化された非表示の値を含むカスタム ツールチップ
     • 一般的な Liquid 関数を使用したカスタム ツールチップ

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

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

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

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

     
       
     
         Order Items Count: {{ order_items.count }}
       
       
     
         Orders Count: {{ orders.count }}
       
     
     

     

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

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

     このページの制限事項で説明したように、カスタム ツールチップは 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] の値が表形式で表示されるようにコンテンツを設定します。

     Order status	{{ orders.status }}
     State	{{ users.state }}
     Count of orders	{{ orders.count }}
     Count of order items	{{ order_items.count }}

{% assign my_variable = orders.status | downcase | strip %}
{% if my_variable == "completed" %}
  {{orders.count}}
{% else %}
  {{orders.count}}
{% endif %}