浮动提示框准备就绪 Storybook
浮动提示框（类似于工具提示）在需要时为用户提供上下文支持。它们默认是隐藏的，点击一个 UI 触发器或文本链接使其变为可见状态。与工具提示不同，浮动提示框会持续显示，直到用户通过点击必需的 X（关闭）触发器来关闭它们。
正在加载...
实时编辑器
<Toggletip title={'Title of the Toggletip'} content={'This is the content of the Toggletip'} footer={'Footer of the Toggletip'} > <Button>Click to show Toggletip with header and footer!</Button> </Toggletip>
何时使用
当用户点击按钮或其他 UI 元素时，浮动提示框会显示**补充内容**，并保持打开状态，直到用户将其关闭。
建议事项
- 当需要更多上下文来理解某个主题时使用。
- 通过链接连接到支持文档或内容。
- 当交互元素必须放置在类似工具提示的组件中时使用。
- 使用需要持续显示的内容，直到用户关闭它以便参考。
- 用于与用户当前正在进行的操作相关的信息内容。
- 提供用户导航到文档以进行进一步学习的方式。
不建议事项
- 如果用户需要在浮动提示框中进行配置、选择、输入数据或编辑页面内容，则不应使用。
- 当带有澄清文本的工具提示足以满足需求时，不应使用。
- 不应包含对用户完成任务至关重要的信息。
- 不应隐藏用户完成任务或工作流程所需的必要信息。
- 不应用于向用户展示操作。
可访问性
浮动提示框是通过点击而非悬停和聚焦来显示的。让它们在点击事件后提示屏幕阅读器播报信息非常重要。
- 包含ARIA 实时区域。
- 使用 type="button" 以避免将触发器误认为是提交按钮。
- 在 UI 触发器上使用可描述的标签或 aria-label，以确保用户理解浮动提示框内容中包含的额外信息（例如：“更多信息”）。
内容
浮动提示框可以包含多种信息，从描述性文本到按钮或链接等交互元素。
行为
触发器
- 浮动提示框显示于
- 用户点击 UI 触发器。
- 当触发元素获得焦点时，在键盘上按下 ENTER 或 SPACE 键。
- 浮动提示框通过以下方式关闭
- 用户点击 关闭图标（x）—— 可选。
- 点击弹出框容器外部。
- 按住 ESC 键。
用户交互
- 浮动提示框旨在容纳交互元素。按钮、文本链接、下拉列表等 UI 元素可以在浮动提示框内部进行完全交互。
滚动
- 当浮动提示框需要滚动内容（例如包含下拉列表）时，浮动提示框的头部和底部会保持固定，而主体部分可以滚动。
状态
浮动提示框有两种状态。
- 隐藏 — 浮动提示框的默认状态。
- 可见 — 状态变化由 UI 触发器点击或键盘 Enter 键触发。
相关内容
生产环境示例
延伸阅读和资源
可访问性资源