Lookerアップデート機能：[Edit Tooltip Content] で作るリッチなツールチップカスタマイズをご紹介！

1．はじめに

こんにちは、NTTインテグレーションの中島です。

前回ブログでご紹介した「ダッシュボードフィルタ拡張機能アップデート」に引き続き今回もLookerアップデート機能のご紹介になります！

今回ご紹介するのは「カスタムツールチップ機能」です。

これまでツールチップのデザインをいじるには、開発者モードでhtmlなどのコードを書く必要がありましたが、今回のアップデートにより、ダッシュボード作成者がその場でレイアウトを調整できるようになりました。

自由度が上がった分、「どう設定すれば綺麗に見えるの？」と悩まれる方も多いはず。そこで今回は、実務で役立つカスタマイズ例を中心に、設定のコツを詳しく解説します。

2．ツールチップ機能とは

Lookerのツールチップとは、グラフ上のデータポイント（棒グラフの棒や折れ線の点）にマウスを合わせた際、補足情報として表示される小さな吹き出しのことです。

限られたグラフのスペースを邪魔することなく、必要な時だけ詳細な数値をユーザーに伝える、データ探索において欠かせないUI要素です。

前提としてカスタムツールチップ機能を利用するためには以下の要件を満たしている必要があります。
・Looker（オリジナル）インスタンスがLooker26.4以降
制限事項については本ブログでは割愛させていただきますので、公式のドキュメントをご覧ください。

これまでのLookerではツールチップのデザイン変更は制限されていましたが、最新のアップデートにより、HTMLを書かなくても可視化編集画面（Visualization）の「系列(Series)」>-「カスタマイズ(Customization)」から「カスタムツールチップ」のボタンを有効化して、以下の項目が設定できるようになりました。

まずは、コードを書かずに設定できる基本的なカスタマイズを以下でご紹介します。

・フォントサイズ：ツールチップのフォントのサイズを設定
・フォントファミリー：ツールチップのフォント（書体）を設定
・境界の半径：ツールチップの隅の丸みを調整
・ボックスシャドウ：ツールチップボックスに影を設定
・その他：文字色、背景色、配置箇所などのスタイルを設定

3．カスタムエディタを使った便利なカスタマイズ

標準のカスタマイズ項目のさらに下へスクロールすると、[Edit Tooltip Content]（ツールチップのコンテンツを編集）というボタンがあります。

ここをクリックして開くエディタを使用することで、標準設定の枠を超えた、さらに柔軟でリッチなデザインへと作り込むことが可能です。

「コードを書く必要がある」と聞くと、「開発者じゃないと難しいのでは……？」と身構えてしまうユーザーの方へも、今回はコピー＆ペーストで今日からすぐに使える、便利な定義をいくつかピックアップしてご紹介します。

まずは、以下の画像をご覧ください。これは、まだ何も手を加えていない初期状態のカスタムツールチップです。ここから、どのようなカスタマイズができるのか、具体的に見ていきましょう！

1. ツールチップの幅や高さを変える

標準のツールチップは、中身のテキスト量に応じて自動でサイズが決まるため、特定の幅や高さを指定することができません。そのため、「ディメンション名やメジャー名が長くて途中で切れてしまう」「表示させるデータ項目が多くて、ツールチップが縦に長くなりすぎる」といった理由で、もっと枠のサイズを自由に調整したいと思ったことはありませんか？

[Edit Tooltip Content] エディタでは以下の様に設定しました。

<div style="width: 250px; height: 100px; padding: 10px;">
  <div>店舗名</div>
  <div style="font-weight: bold;">{{ m_store.storename }}</div>
</div>
<div style="width: 250px; height: 100px; padding: 10px;">
  <div>売上金額</div>
  <div style="font-weight: bold;">{{ t_sales.sales }}</div>
</div>

このようにwidth（幅）とheigh（高さ）を指定することで、ツールチップが不必要に広がったり、逆にテキストが折り返されすぎたりするのを防ぐことが可能です。

2. 複数メジャーの自由な配置とデザイン

標準のツールチップは項目が縦に積み上がりますが、複数の項目の配置を横並びにしたり、文字の色を変えたりと自由にデザインすることが可能です。

[Edit Tooltip Content] エディタでは以下の様に設定しました。

<div style="display: flex; gap: 10px; min-width: 300px;">

  <div style="flex: 1; padding: 10px; border: 1px solid #e0e0e0; border-radius: 4px; background-color: #f9f9f9;">
    <div style="text-align: left; font-size: 11px; color: #1A73E8; font-weight: bold; margin-bottom: 5px;">店舗名</div>
    <div style="text-align: center; font-size: 18px; font-weight: bold; color: #333;">
      {{ m_store.storename }}
    </div>
  </div>

  <div style="flex: 1; padding: 10px; border: 1px solid #e0e0e0; border-radius: 4px; background-color: #f9f9f9;">
    <div style="text-align: left; font-size: 11px; color: #1A73E8; font-weight: bold; margin-bottom: 5px;">売上金額</div>
    <div style="text-align: center; font-size: 20px; font-weight: bold; color: #333;">
      {{ t_sales.sales }}
    </div>
  </div>

</div>

設定したポイントは以下の通りです。

・display: flex; で項目を横並びを配置
　店舗名と売上のブロックをきれいに横に並べています。gap: 10px; でブロック間の隙間を作っています。

・dimension: 項目名（左上）とmeasure: 数値（中央）の打ち分け
　ブロック内の1行目（項目名）を text-align: left;、2行目（数値）を text-align: center; に設定することで、配置　　　　　　　　の強弱をつけています。

・フォントサイズの強弱
　項目名を 11px、数値を 18px~20px に設定し、ユーザーが最も知りたい「データ」が目に飛び込んでくるように設計しました。

・色の指定
　項目名と数値の視認性を向上させるため、項目名の文字色を青色に設定しました。

3. 非表示項目（Hidden Fields）をツールチップにだけ表示させる

グラフには出したくないけれど、詳細情報としてツールチップには載せたい項目がある場合、その項目を 「Hidden（非表示）」 に設定していても、エディタから参照することが可能です。

今回の例では、店舗名や売上金額の他に、グラフ上には出したくない「売上金額2025」や「売上金額2024」をツールチップ内には表示させるイメージです。

下記の通り、グラフ上に表示させたくないフィールドは「非表示」設定にしておきます。

[Edit Tooltip Content] エディタでは以下の様に設定しました。

<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
  <thead>
  </thead>
  <tbody>
    <tr style="border-bottom: 1px solid #eee;">
      <td style="padding: 8px 5px; color: #1A73E8;">店舗名</td>
      <td style="padding: 8px 5px; text-align: right; font-weight: bold;">
        {{ m_store.storename }}
      </td>
    </tr>
    <tr style="border-bottom: 1px solid #eee;">
      <td style="padding: 8px 5px; color: #1A73E8;">売上金額</td>
      <td style="padding: 8px 5px; text-align: right; font-weight: bold;">
        {{ t_sales.sales }}
      </td>
    </tr>
    <tr style="border-bottom: 1px solid #eee;">
      <td style="padding: 8px 5px; color: #1A73E8;">売上金額2025</td>
      <td style="padding: 8px 5px; text-align: right;">
        {{ t_sales.sales2025 }}
      </td>
    </tr>
    <tr>
      <td style="padding: 8px 5px; color: #1A73E8;">売上金額2024</td>
      <td style="padding: 8px 5px; text-align: right;">
        {{ t_sales.sales2024 }}
      </td>
    </tr>
  </tbody>
</table>

この機能では「メインの数字（売上金額）はグラフで見せ、補足情報（2025年の売上金額や2024年の売上金額）はホバー時のみ見せる」という、情報の階層化が実現できます。

4．まとめ

今回は簡単に設定できるカスタマイズ方法をご紹介させていただきましたが、こんな形で配置したい！という具体的なイメージがあれば、生成AIに構文を作ってもらうことをお勧めします。

以前までの html:  パラメータを使った手法では、LookML側の設定を変える必要があり、開発者権限が必要であったり、閲覧ユーザーはエンジニアに修正を依頼する必要がありました。

このカスタムエディタの最大の特徴は「エンジニア以外（ダッシュボード閲覧者・編集者）が、その場のひらめきですぐにUIを調整できるようになったこと」です。LookML側の設定を変えずとも、カスタムエディタを使って柔軟にカスタマイズできるようになったので、「もっとこう見せたい」「この情報も追加したい」という現場のニーズを、その場ですぐに形にできるようになりました。

新しいツールチップ機能をフル活用して、ユーザーにとって最高に使い勝手の良いダッシュボードを目指していきましょう！

——
danect⁺でAIをつかったBIダッシュボード実装支援サービスを展開中です！→danect⁺AIダッシュボード支援サービス
——