自訂工具提示

您可以自訂使用者將滑鼠游標懸停在 Looker 視覺化圖表中的元素上時顯示的工具提示。自訂工具提示可提供更多背景資訊、顯示其他指標，以及為使用者量身打造顯示的資訊。自訂工具提示實驗功能可讓您在探索資料視覺化編輯器中，使用 UI 設定和支援 Liquid 範本的 HTML 編輯器，設定工具提示。

本頁面提供相關指引，說明如何在 Looker (原始) 執行個體上啟用及使用 Custom Tooltips Labs 功能。本頁面包含下列章節：

提供意見回饋或取得支援

如要提供意見回饋或要求支援，請填寫並提交這份「Looker 自訂工具提示 - 預覽版問題」表單。

使用者和執行個體需求

如要啟用及使用 自訂工具提示 Labs 功能，必須符合下列條件：

  • Looker (原始版本) 執行個體必須執行 Looker 26.0 以上版本，且為Looker 代管。
  • 您必須具備管理員角色，才能啟用「自訂工具提示」實驗室功能。
  • 如要在探索中製作自訂工具提示，您必須具備 explore 權限，並存取基礎 LookML 模型。

限制

自訂工具提示實驗室功能有下列限制：

  • 自訂工具提示僅適用於表格圖表、單一值圖表和笛卡兒圖表。圓餅圖、盒鬚圖或瀑布圖不支援自訂工具提示。
  • 自訂工具提示只能參照「探索」查詢中包含的欄位。
  • 工具提示只能顯示與指定欄位相同的資料精細程度。如果使用者想查看比工具提示更精細的資料，必須使用「向下切入」功能。
  • 自訂工具提示會儲存在圖表層級。無法在「探索」層級儲存。
  • 如果您從含有自訂工具提示的探索查詢中移除欄位，使用者仍可查看該工具提示 (如果該探索查詢是與他們共用，且他們將欄位加回探索查詢)。
  • 自訂工具提示中轉譯的 HTML 須遵守 Looker 的 HTML 清理規則。
  • 自訂工具提示可能不支援所有 Liquid 變數。
  • 如果內部 (非嵌入式) 資訊主頁或嵌入式資訊主頁套用了任何主題，工具提示自訂設定都會覆寫這些主題。

啟用自訂工具提示

「自訂工具提示」 Labs 功能預設為啟用。

如果先前已停用「自訂工具提示」實驗室功能，Looker 管理員可以按照下列步驟啟用「自訂工具提示」實驗室功能：

  1. 在 Looker 中，按一下主要導覽選單中的「管理」選項。
  2. 按一下「一般」專區下方的「Labs」選項，開啟「Labs」頁面。
  3. 選取「自訂工具提示」切換鈕，啟用這項實驗室功能。

如何使用自訂工具提示

如果您具備適當權限，可以自訂探索資料視覺化圖表中數列的工具提示。如要自訂工具提示，請按照下列步驟操作：

  1. 開啟或建立探索查詢，然後選取支援的圖表類型。
  2. 在「探索」「圖表」分頁中，按一下「編輯」，開啟圖表編輯器。
  3. 選取「系列」分頁標籤。
  4. 在「自訂」部分下方，找出要新增工具提示的系列。如有多個數列，請展開要新增工具提示的數列。
  5. 選取「自訂工具提示」切換鈕，即可為特定系列啟用自訂工具提示功能。
  6. 在「自訂工具提示」部分，你可以使用提供的選項調整工具提示的基本外觀：
    • 字型大小：設定工具提示字型的字型大小。
    • 字型系列：設定工具提示字型的字型系列。
    • 工具提示背景顏色：設定工具提示的背景顏色。
    • 字型顏色：設定工具提示的字型顏色。
    • 圓角半徑：設定工具提示邊緣的圓角程度。數字越大，工具提示的邊緣越圓。
    • 邊框陰影：設定工具提示的陰影。
    • 文字對齊方式：設定工具提示字型的對齊方式。
  7. 除了上述選項，您也可以按一下「編輯工具提示內容」，開啟「編輯工具提示內容」HTML 編輯器，套用更進階的樣式選項。

  8. 在「編輯工具提示內容」編輯器中，您可以使用 HTML 和 Liquid 變數，建構及填入工具提示。

    • 使用標準 HTML 標記設定工具提示內容的格式 (例如 <div>、<span>、<strong>、<table>、<ul>、<ol>)。請注意，系統會根據 Looker 的 HTML 消毒規則，轉譯 HTML。
    • 自訂工具提示可能不支援所有 Liquid 變數。

  9. 編輯自訂工具提示內容時，您可以按一下「預覽」 (或使用鍵盤快速鍵，在 Mac 上按 Command-Return 鍵，在 PC 上按 Ctrl+Enter 鍵)，然後將游標懸停在視覺化預覽窗格中的資料點上，即可預覽工具提示。

  10. 按一下 HTML 編輯器中的「儲存」，然後將 Explore 儲存為 Look 或資訊主頁圖塊，即可保留變更。

範例

以下範例說明不同層級的工具提示自訂用途：

含有多個指標值的自訂工具提示

如果想向使用者提供視覺化圖表中顯示的資料點相關資訊，自訂工具提示就很有幫助。舉例來說，單一值圖表只會顯示一項指標的值。自訂工具提示可顯示更多資料，並為使用者提供圖表資料的更多情境資訊。

在這個範例中，名為「2025 年的訂單數」的單一值圖表會顯示「使用者國家/地區」為「美國」的「訂單數」值，並以包含「訂單項目數」的「探索」查詢為依據。不過，圖表中不會顯示「訂單項目數」的值。

以下 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。

使用者可以查看「訂單數」和「訂單項目數」這兩個欄位的值，進一步瞭解圖表中顯示的資料。

自訂工具提示，內含以表格形式顯示的隱藏值

如本頁面的限制資訊所述，自訂工具提示只能參照「探索」查詢中包含的欄位。不過，您可能不想在圖表中顯示所有「探索」欄位。使用自訂工具提示，您可以向使用者顯示從視覺化效果中隱藏的欄位資料，而不必將這些欄位新增至圖表。

在這個範例中，探索資料表包含「訂單數量」和「訂單項目數量」這兩項指標，並依「使用者所在州/省」和「訂單狀態」這兩項維度分組。開發人員想向使用者顯示小型表格，並從表格圖表中隱藏「訂單狀態」和「訂購商品數量」欄位。不過，開發人員仍希望使用者看到與特定「訂單數」相關聯的「訂單狀態」和「訂購品項數量」值。

在「訂單數量」系列的「編輯工具提示內容」編輯器中輸入下列 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>

資料表圖表中的「訂單數」值工具提示，會以雙欄資料表顯示「使用者州別」、「訂單狀態」、「訂單數」和「訂單項目數」的值。

使用者可以查看所有探索查詢資料，但資料表圖表中不會顯示額外欄位。

使用常見 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 %}

「已完成」訂單狀態欄的「訂單數量」值會在工具提示中顯示綠色文字。

工具提示會在「已完成訂單狀態」欄中以綠色顯示「訂單數」值。

「已取消」訂單狀態欄的「訂單數量」值會在工具提示中顯示紅色文字。

工具提示會在「已完成訂單狀態」欄中以綠色顯示「訂單數」值。

使用者可以快速區分直條圖中顯示的已取消和已完成訂單。

  • 進一步瞭解如何建立視覺化效果。
  • 如要進一步瞭解如何在 Looker 中使用 Liquid，請參閱「Liquid 變數參考」說明文件頁面。
  • 如要進一步瞭解 Looker 支援的 HTML 標記，請參閱 HTML 消毒說明文件頁面。