自定义提示

您可以自定义当用户将鼠标悬停在 Looker 可视化图表中的元素上时显示的提示。借助自定义提示，您可以提供更多背景信息、显示其他指标，并根据需要调整向用户显示的信息。借助自定义提示实验室功能，您可以使用界面设置和支持 Liquid 模板的 HTML 编辑器，在探索可视化图表编辑器中配置提示。

本页面提供了相关指南，可帮助您在 Looker（原始版本）实例中启用和使用自定义提示实验室功能。本页面包括以下部分：

• 提供反馈或获取支持
• 用户和实例要求
• 局限性
• 启用自定义提示
• 如何使用自定义提示
• 示例
• 相关资源

提供反馈或获取支持

您可以填写并提交此 Looker 自定义工具提示 - 预览版问题表单，以提供反馈或请求支持。

用户和实例要求

如需启用和使用 自定义提示 实验性功能，您必须满足以下要求：

• 您的 Looker（原始）实例必须运行 Looker 26.0 或更高版本，并且由 Looker 托管。
• 您必须拥有“管理员”角色才能启用自定义提示实验室功能。
• 如需在探索中制作自定义提示，您必须拥有 explore 权限，并且能够访问基础 LookML 模型。

限制

自定义提示实验性功能具有以下限制：

• 自定义工具提示仅适用于表格图表、单值图表和笛卡尔坐标图表。饼图、箱线图或瀑布图不支持自定义提示。
• 自定义提示只能引用探索查询中包含的字段。
• 提示只能显示与指定字段相同粒度的数据。如果用户想查看比提示中更精细的数据，必须使用下钻功能。
• 自定义提示是在可视化图表一级保存的。无法在探索级别保存。
• 如果您从具有自定义工具提示的探索查询中移除某个字段，那么如果用户与您共享该探索查询，并且他们将该字段重新添加到探索查询中，则仍可看到该工具提示。
• 自定义提示中的渲染 HTML 需遵守 Looker 的 HTML 清理规则。
• 并非所有 Liquid 变量都可能支持自定义提示。
• 提示自定义设置会替换应用于内部（非嵌入式）信息中心或嵌入式信息中心的任何主题。

启用自定义提示

自定义提示 实验室功能默认处于启用状态。

如果之前停用了自定义提示实验室功能，Looker 管理员可以按照以下步骤启用自定义提示实验室功能：

1. 在 Looker 中，点击主导航菜单中的管理选项。
2. 点击常规部分下的实验室选项，打开实验室页面。
3. 选择自定义提示切换开关以启用此实验室功能。

如何使用自定义提示

如果您拥有适当的权限，则可以自定义探索可视化图表中序列的提示。如需自定义提示，请按以下步骤操作：

1. 打开或创建探索查询，然后选择一种支持的可视化图表类型。
2. 在“探索”可视化图表标签页中，点击修改以打开可视化图表编辑器。
3. 选择系列标签页。
4. 在自定义部分下，找到要添加提示的序列。如果有多个序列，请展开要添加提示的序列。
5. 选择自定义提示开关，为相应序列启用自定义提示功能。
6. 在自定义提示部分，您可以使用提供的选项调整提示的基本外观：
   • 字体大小：设置提示字体的字体大小。
   • 字体系列：设置提示字体的字体系列。
   • 提示背景颜色：设置提示的背景颜色。
   • 字体颜色：设置提示的字体颜色。
   • 边框半径：设置提示边框的圆角程度。该数值越大，提示的边缘就越圆。
   • 边框阴影：设置提示的阴影。
   • 文字对齐方式：设置提示字体的对齐方式。
7. 除了上述选项之外，您还可以点击修改提示内容打开 修改提示内容 HTML 编辑器，应用更高级的样式选项。

8. 在 Edit Tooltip Content 编辑器中，您可以使用 HTML 和 Liquid 变量来构建和填充提示。

   • 使用标准 HTML 标记设置提示内容的格式（例如 <div>、<span>、<strong>、<table>、<ul>、<ol>）。请注意，呈现的 HTML 需遵守 Looker 的 HTML 清理规则。
   • 并非所有 Liquid 变量都可能支持自定义提示。

9. 在修改自定义提示内容时，您可以点击预览（或使用键盘快捷键，在 Mac 上按 Command-Return，在 PC 上按 Ctrl+Enter）预览提示，然后将鼠标悬停在可视化图表预览窗格中的数据点上。

10. 在 HTML 编辑器中点击保存，然后将探索另存为 Look 或另存为信息中心图块，以保留更改。

示例

以下示例展示了不同程度的提示自定义设置的用例：

• 包含多个度量值的自定义工具提示
• 包含隐藏值（以表格形式呈现）的自定义提示
• 包含常用 Liquid 函数的自定义提示

包含多个度量值的自定义提示

如果您想向用户提供有关可视化图表中显示的数据点的更多背景信息，自定义提示会很有帮助。例如，单值图表仅显示一个指标的值。借助自定义提示，您可以显示更多数据，并为用户提供有关图表中数据的更多背景信息。

在此示例中，名为“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>

用户可以查看“订单数”和“订单商品数量”这两个字段的值，从而更全面地了解图表中显示的数据。

包含隐藏值的自定义提示，以表格形式呈现

如本页面的限制信息中所述，自定义提示只能引用探索查询中包含的字段。不过，您可能并不想在图表中显示所有探索字段。借助自定义提示，您可以向用户显示在可视化图表中隐藏的字段中的数据，而无需将这些字段添加到图表中。

在此示例中，探索数据表包含“订单数”和“订单项数”指标，按“用户所在州”和“订单状态”维度分组。开发者希望向用户显示一个小表格，并从表格图表中隐藏“订单状态”和“订单商品数量”字段。不过，开发者仍希望用户看到与给定订单数相关联的订单状态和订单商品数量值。

以下 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 清理文档页面。