文字提示

1. 组件概述

文字提示是一个交互反馈组件，用于为页面元素添加悬浮提示信息。它本质上是一个容器，可以包裹其他组件，当用户将鼠标悬停在容器上或点击容器时，会显示一个浮层来展示额外的说明文字。这个组件适用于需要为用户提供帮助信息、术语解释或操作提示的场景，让界面保持简洁的同时又能提供必要的说明。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：术语解释。在学习辅导类应用中，当页面上出现专业术语或概念时，可以用文字提示组件包裹这些词汇，鼠标悬停时显示详细解释。例如在数学答疑应用中，对”导数”一词添加提示，显示”导数表示函数在某一点的变化率”。
• 场景二：操作引导。在 AI 对话应用中，为”发送”按钮添加文字提示，当用户悬停时显示”点击后将调用 AI 生成回答”，帮助初次使用的用户理解按钮功能。

加载中...

查看 JSON

复制 JSON

3. 功能配置

配置

基础折叠组

配置项	说明
提示标题	提示浮层的标题文字，显示在提示内容的上方。如果提示内容较简短，可以不设置标题；如果需要分类说明或强调主题，可以添加标题。
提示内容	提示浮层中显示的主要文字内容。这是用户悬停或点击时看到的说明信息，应简洁明了地传达要表达的内容。
触发方式	控制提示浮层何时显示。可选”鼠标悬停”（默认）或”点击”，也可以同时选择两种方式。鼠标悬停适合快速查看的场景；点击适合需要用户主动触发、或提示内容较长需要仔细阅读的场景。
提示位置	提示浮层相对于容器的显示位置，可选：上、下、左、右。默认显示在上方。根据容器在页面中的位置选择合适的方向，避免浮层被页面边缘截断。
主题色	提示浮层的配色风格，可选”亮色”或”暗色”。亮色为浅色背景深色文字，暗色为深色背景浅色文字。根据页面整体风格选择，一般亮色更柔和，暗色更醒目。
容器内联	控制容器的显示方式。关闭时容器为块级元素，会独占一行；开启后容器变为内联元素，可以和其他内容在同一行显示。当需要在一段文字中为某个词添加提示时，应开启此选项。
点击容器外部关闭提示	仅在触发方式包含”点击”时显示。开启后，点击提示浮层以外的区域会自动关闭浮层；关闭后，需要再次点击容器才能关闭浮层。

高级折叠组

配置项	说明
容器标签	指定容器使用的 HTML 标签类型，如 div、span、p 等。一般情况下无需修改，使用默认值即可。如果需要语义化标签（如 article、section）可以在此设置。
浮层偏移量	调整提示浮层位置的微调参数，包含水平和垂直两个方向的偏移值，单位为像素。当默认位置不够理想时，可以通过设置偏移量进行精细调整。
可进入浮层	控制鼠标是否可以移入提示浮层。开启后，用户可以将鼠标移入浮层中（例如选中浮层中的文字），浮层不会消失；关闭后，鼠标离开容器区域浮层就会立即关闭。如果提示内容需要用户复制或仔细阅读，建议开启。
展示浮层箭头	控制提示浮层是否显示指向容器的小箭头。开启后浮层会有一个三角形箭头指向触发区域，视觉上更清晰地表明提示与哪个元素相关；关闭后浮层为纯矩形。
延迟打开	鼠标悬停后延迟多长时间才显示提示浮层，单位为毫秒（ms）。设置适当的延迟可以避免用户快速划过时频繁弹出提示。默认为 0，即立即显示。
延迟关闭	鼠标离开后延迟多长时间才关闭提示浮层，单位为毫秒（ms）。设置适当的延迟可以让用户有时间将鼠标移入浮层（配合”可进入浮层”使用）。默认为 0，即立即关闭。