Tooltip 文字提示 - Docs - Artefact

Tooltip 文字提示

Overlays

自动交互

Introduction

Tooltip 组件是一个上下文浮层元素，用于在用户将指针悬停或聚焦触发元素时显示补充性、非交互式的描述性文本。

该组件专为我们的零 JS 静态渲染架构和条件式注水模型而构建，使用高效的页面构建器友好绑定，使内容作者能够无缝地将上下文提示附加到任意 UI 元素上。

以下示例展示了内容作者如何配置和绑定 Tooltip 区块。

一个经典的悬停提示，解释按钮操作，使用默认的交互放置（顶部居中）。

{
  "type": "tooltip",
  "triggerText": "Submit Report",
  "content": "Sends your compiled analytics to the billing department."
}

同一组件通过 placement 属性在多个方向（底部、右侧、左侧）重新定位，以适配狭窄面板。第二项展示了 disabled 变体，当交互被禁用时不显示提示。

{
  "type": "tooltip",
  "triggerText": "Bottom Hint",
  "content": "Appears below the trigger.",
  "placement": "bottom",
  "interactive": true
}

属性	CMS 字段类型	默认值	描述 / 支持的选项
触发文本 (`triggerText`)	`string`	`"Hover me"`	打印在提示触发器内部的视觉标签。
提示内容 (`content`)	`string`	-	悬停时显示的补充性辅助描述文本。
放置定位 (`placement`)	`select`	`"top"`	浮层相对于触发器的实体锚定方向。 • 选项：`"top"`、`"bottom"`、`"left"`、`"right"`，以及对应的 `-start` / `-end` 变体。
禁用 (`disabled`)	`boolean`	`false`	完全禁用提示功能，阻止浮层渲染。
强制交互 (`interactive`)	`boolean`	`true`	注水提示孤岛以绑定悬停/聚焦事件。
延迟毫秒 (`delayMs`)	`number`	`300`	提示浮层在触发前保持的毫秒数。

智能视口边界对齐： 交互式 Preact 孤岛会动态跟踪屏幕空间。若提示在视口边缘附近打开，它会自动翻转方向（例如从底部切换为顶部）并在其轴线上偏移，防止内容被裁剪。
统一事件委托： 悬停检测、聚焦显示与 Esc 关闭等交互从容器上的中央监听器干净地委托处理，最小化客户端事件绑定。
语义化浮层： Tooltip 编译为原生可访问的布局，开箱即用地包含 role="tooltip"、aria-describedby 和唯一触发器 ID 等语义属性，确保完全的屏幕阅读器兼容性。

Popover 气泡卡片

Migrate components to new tokens