自訂工具提示

您可以自訂工具提示，當使用者將滑鼠游標懸停在 Looker 圖表中的元素上時，就會顯示這些提示。自訂工具提示可讓您提供更多背景資訊、顯示其他指標，並根據使用者需求調整呈現的資訊。使用「自訂工具提示」圖表設定，您可以在「探索」的「樣式」分頁 (或傳統探索的圖表「編輯」選單) 中，結合 UI 設定和支援 Liquid 範本的 HTML 編輯器，設定工具提示。

本頁面說明如何在 Looker (原始) 執行個體上啟用及使用自訂工具提示圖表設定。本頁面包含下列章節：

• 使用者和執行個體需求
• 限制
• 如何使用自訂工具提示
• 範例
• 相關資源

使用者和執行個體相關規定

如要使用「自訂工具提示」圖表設定，必須符合下列需求條件：

• Looker (原始) 執行個體必須搭載 Looker 26.4 以上版本。
• 如要在探索中建立自訂工具提示，您必須具備 explore 權限，並可存取基礎 LookML 模型。

限制

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

• 除了下列類型外，大多數圖表類型都支援自訂工具提示：
  • 多重圓環圖
  • 文字雲圖表
  • 靜態地圖 (區域) 圖表
  • 靜態地圖 (點) 圖表
  • 使用圖表設定編輯器製作的圖表 (桑基圖除外)
  • 自訂圖表
• 自訂工具提示只能參照探索查詢中包含的欄位。
• 工具提示只能顯示與指定欄位相同的資料精細程度。如果使用者想查看比工具提示更精細的資料，就必須使用向下鑽研功能。
• 自訂工具提示會儲存在圖表層級。無法在「探索」層級儲存。
• 如果從含有自訂工具提示的探索查詢中移除欄位，只要與使用者共用該探索查詢，且使用者將欄位加回探索查詢，他們仍可看到該工具提示。
• 自訂工具提示中轉譯的 HTML 須遵守 Looker 的 HTML 清理規則。
• 自訂工具提示可能不支援部分 Liquid 變數。
• 工具提示自訂設定會覆寫套用至內部 (非嵌入) 資訊主頁或嵌入式資訊主頁的所有主題。

如何使用自訂工具提示

如果您具備適當權限，可以自訂「探索」圖表中的系列工具提示。如要自訂工具提示，請按照下列步驟操作：

1. 開啟或建立探索查詢，然後選取支援的圖表類型。
2. 在「設定」面板中，點選「樣式」分頁標籤來編輯圖表。如果是傳統探索，請在「探索」的「圖表」分頁中點選「編輯」，開啟圖表編輯器。
3. 開啟「系列」選單。
   • 如果是 Google 地圖圖表和盒鬚圖，請按一下「繪圖」分頁標籤，然後繼續執行步驟 5。
   • 如果是瀑布圖，請按一下「序列」選單，然後前往步驟 5。
   • 如果是 KPI (單一值) 圖表、單一值 (舊版) 圖表和單一記錄圖表，請按一下「樣式」選單，然後前往步驟 5。
   • 如果是漏斗圖，請按一下「標籤」選單，然後前往步驟 5。
   • 如果是時間線圖，請按一下「選項」選單，然後繼續執行步驟 5。
4. 在「自訂」部分下方，找出要新增工具提示的系列。如果有多個系列，請展開要新增工具提示的系列。
5. 按一下「自訂工具提示」切換鈕，即可為特定系列或圖表啟用自訂工具提示功能。
6. 在「自訂工具提示」部分，您可以使用提供的選項調整工具提示的基本外觀：
   • 字型大小：設定工具提示的字型大小。
   • 字型系列：設定工具提示字型的字型系列。
   • 框線半徑：設定工具提示邊緣的圓角程度。數字越大，工具提示邊緣越圓。
   • 方塊陰影：設定工具提示方塊的陰影。
   • 字型顏色：設定工具提示的字型顏色。
   • 背景顏色：設定工具提示的背景顏色。
   • 框線顏色：設定工具提示的框線顏色。
   • 文字對齊：設定工具提示字型的對齊方式。選擇「靠左對齊」、「置中對齊」或「靠右對齊」。預設設定為「靠左對齊」。
7. 除了上述選項外，您也可以按一下「編輯工具提示內容」，開啟「編輯工具提示內容」HTML 編輯器，套用更進階的樣式選項。

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

   • 使用標準 HTML 代碼設定工具提示內容的格式 (例如 <div>、<span>、<strong>、<table>、<ul>、<ol>)。請注意，轉譯的 HTML 須遵守 Looker 的 HTML 清理規則。
   • 自訂工具提示可能不支援部分 Liquid 變數。

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

10. 在 HTML 編輯器中點選「儲存」，然後將探索儲存為 Look 圖表或資訊主頁圖塊，即可保留變更。

範例

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

• 含有多個測量值的自訂工具提示
• 自訂工具提示，其中隱藏值以表格形式呈現
• 使用常見 Liquid 函式的自訂工具提示

含有多個測量值的自訂工具提示

如要向使用者提供更多有關圖表中資料點的背景資訊，自訂工具提示會很有幫助。舉例來說，單一值圖表只會顯示一項測量指標的值。自訂工具提示可顯示更多資料，並為使用者提供更多有關圖表資料的情境資訊。

在這個範例中，單一值圖表標題為「Count of orders in 2025」，顯示「Users Country」為「USA」的「Orders Count」值，並根據探索查詢建立，其中也包含「Order Items Count」。不過，圖表不會顯示「Order Items Count」的值。

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

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

自訂工具提示，其中隱藏值以表格形式呈現

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

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

在「訂單數量」系列的「編輯工具提示內容」編輯器中輸入下列 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 函式，例如管道和使用 downcast 陳述式。在這個範例中，柱狀圖會顯示依「訂單狀態」分組的「訂單數量」。開發人員想設定工具提示的格式，讓使用者能快速辨別「已取消」訂單狀態和「已完成」訂單狀態的訂單數量差異。

在「編輯工具提示內容」編輯器中，為「訂單數量」系列輸入下列 HTML 和 Liquid，並將工具提示值設為紅色 (代表「已取消」狀態的訂單數量) 和綠色 (代表「已完成」狀態的訂單)。程式碼會使用變數指派和管道，確保字串準確無誤，並套用指定的條件式格式設定：

注意： 為確保條件陳述式準確無誤，請在指派變數時套用資料轉換。

{% 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 %}

「訂單狀態」欄中「complete」的「訂單數」值，會在工具提示中顯示綠色文字。

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

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

相關資源

• 進一步瞭解如何建立圖表。
• 如要瞭解在 Looker 中使用 Liquid 的其他方式，請參閱「Liquid 變數參考資料」說明文件頁面。
• 如要進一步瞭解 Looker 支援的 HTML 代碼，請參閱「HTML 清理」說明文件頁面。