你能用它做什么?
安置控制
写工具提示文本,然后选择气泡出现的位置:顶部、底部、左侧、右侧,加上开始和结束变体。使用 X 和 Y 像素偏移进行微调,因此气泡永远不会覆盖它所解释的内容。
- 解释问题所在的表单字段、价格或行话。
- 用偏移量固定气泡,以便清除菜单、粘性标题和附近的按钮。
- 通过带有简短上下文提示的多步骤表单来指导用户。
造型:正常状态和悬停状态
分别设计触发器和气泡。设置背景、文本颜色、排版、填充、边框半径、边框和框阴影。每个属性都对正常状态和悬停状态有独立的控制。
- 完全匹配品牌颜色,而不是默认使用灰色浏览器。
- 根据上下文,使提示变得微妙(幽灵轮廓)或响亮(带有阴影的实心药丸)。
- 式悬停反馈,以便用户知道该元素是交互式的。
触发和动画
Trigger on hover 以便快速提示或点击持久笔记,这在触摸屏上效果更好,添加入口动画、控制持续时间和隐藏延迟,这样工具提示就感觉流畅,而不是刺耳。
- 悬停以获取桌面缩微胶印;单击以获取适合移动设备的持久提示。
- 微妙的淡入淡出或比例入口吸引着用户的眼睛,而不会惹恼用户。
- Hide-delay 防止光标刷过时工具提示闪烁。
元素或扩展:您需要哪一个?
此页面 (工具提示元素):你需要一个新的提示掉到页面上,它自带触发文本或图标。
工具提示扩展: 您已经有一个按钮、图像或标题,并且想要附加一个工具提示,包括"跟随光标"模式。
常见用例
- 表单:“密码需要在输入旁边添加 12+ 个字符”,无需延长表单。
- 定价表:定义"每座位"与"每工作空间"内联。
- 按钮:澄清点击后会发生什么(“无需卡”)。
- 团队/列表:角色、生物片段或悬停时的联系快捷方式。
- 入职:除了新功能或仪表板小部件之外的简短说明。
如何添加?
- Drop 小部件。Elementor 中,在主插件下搜索 “工具提示”, 拖动到提示所属的位置。
- Write和放置。输入工具提示文本,设置触发(悬停或点击),选择放置和偏移。
- Style it。Style标签中, 设计正常和悬停状态:颜色, 排版,半径, 影子。发布。
工具提示常见问题
了解用户对 Tooltip 的询问最多的查询,并在一处找到答案。
Tooltip 元素的用途是什么?
添加简短、有用的上下文,而不会使布局混乱:字段解释、术语定义、按钮说明、内联说明。任何非必需的、在需要时有帮助的东西。
这与 Tooltips 扩展有何不同?
该元素是一个独立的小部件,有自己的触发器。 扩展 将工具提示附加到任何现有的小部件、部分或容器,并添加关注光标模式。需要新的提示点:使用元素。需要页面上已有的东西的工具提示:使用扩展。
我可以分别设置正常状态和悬停状态吗?
是。样式选项卡具有独立的普通和悬停控制,用于背景、文本、边框、半径和阴影。
我如何控制气泡出现的位置?
使用放置预设(顶部、底部、左侧、右侧,加上开始和结束变体),然后以像素为单位使用 X 和 Y 偏移进行推动。
悬停或单击:我应该使用哪个触发器?
Hover,以获得快速的桌面提示;点击任何必须在触摸屏上工作的东西,因为移动设备上不存在hover。
它会减慢我的网站速度吗?
No。page上出现时只加载自己的小CSS和JS,每页一把工具提示没有明显的影响。
