您可以使用 Tooltips 扩展做什么
定位和互动行为
将任何元素的气泡放在顶部、底部、左侧或右侧悬停或单击时触发添加入口动画(淡入淡出、缩放)、持续时间和隐藏延迟。或启用"关注光标",以便工具提示与鼠标一起移动,这对于地图、图表和图表非常有效。
- 将工具提示固定到任何一侧,这样它们就永远不会涵盖它们解释的内容。
- Follow Cursor 将图像和图表变成可探索的标记表面。
- 动画和计时控制使每个工具提示感觉都是界面原生的。
视觉定制
用您自己设计的工具提示替换浏览器默认值:文本和背景颜色、填充、边框、边框半径、箭头样式和颜色、框阴影和完整排版控制。
- 背景、文本和箭头的精确品牌颜色。
- 与设计系统的其余部分相匹配的边框、半径和阴影。
- 可读缩微胶片的字体系列、大小和重量控制。
任何元素的工具提示,具有动态内容
它适用于按钮、图标、图像、标题、容器、列、部分以及您可以在编辑器中选择的任何其他内容。工具提示文本字段接受 Elementor 动态标签,因此提示可以提取实时数据,例如价格或发布日期。
- 1次开启扩展,每个元素都得到一个Tooltip面板,你永远不会为每个提示添加单独的小部件。
- 每个元素都有自己的工具提示,因此连续三张牌可以各自说不同的话。
- 动态标签保持提示当前,例如实时产品详细信息。
扩展或元素:您需要哪一个?
此页面 (工具扩展, 专业版):内容已经存在,你想给它附加一个提示,它适用于任何小部件、列、部分或容器。
工具提示元素(免费):您需要在页面上添加新的提示,并且小部件提供自己的触发文本、图标或图像。
常见用例
- 图标和按钮: 单击之前解释仅图标按钮的作用。
- 图像和图表: 在地图、平面图、技术图纸上遵循光标标签。
- 标题和术语: 定义行内行行话,不带脚注。
- 部分: Beta或“新”徽章和特征呼叫提示的整个块。
- 呜呜商务: 购买按钮上附有运输、库存或变体注释。
如何将工具提示添加到任何 Elementor 小部件
- 选择任何内容。单击 Elementor 中的小部件、列、容器或部分,然后打开其高级选项卡以找到工具提示部分。
- Write和放置。输入消息, 然后设置放置, 触发(悬停, 点击或自定义), 动画,持续时间和Follow光标, 如果你需要它。
- Style it。设置颜色, 排版,填充, 半径,箭头和阴影, 然后更新页面。
- 有关屏幕截图的演练,请阅读 如何在 Elementor 中添加工具提示.
工具提示常见问题
这与 Tooltip 小部件有何不同?
2者都有放置预设、悬停或点击触发器、动画和Follow Cursor,不同之处在于工具提示所在,扩展程序将一个附加到已经位于您的页面上并且需要Pro的内容上 工具提示元素 是免费的独立小部件,有自己的触发文本、图标或图像 现有按钮、图标或部分:使用扩展名 需要提示的空点:使用元素。
工具提示在移动设备上的表现如何?
Hover 在触摸屏上不存在,因此轻按作为触发器,在其他地方进行第二次轻按会消除气泡。保持移动工具提示文本短,并且更喜欢点击触发器以获取关键提示。
SEO和可访问性工具提示是否良好?
Tooltip文本在HTML中,所以它是可抓取的,但是永远不要把必不可少的信息只放在一个工具提示里面,因为一些屏幕阅读器和键盘流可能会错过它。使用工具提示进行补充帮助,并使用辅助工具进行测试。
许多工具提示会减慢我的页面速度吗?
HTML和CSS,每个工具提示都添加少量,典型使用,每页5到10个左右,没有明显的影响,一页几十个重动画工具提示可以加起来,保持简洁。
Follow Cursor 有什么好处?
Explorable visuals:地图、产品热点、图表、技术图 气泡遵循指针,因此光标下的每个区域都有自己的实时解释。
我可以在工具提示中使用动态内容吗?
是与动态标签相结合,注入实时数据,如价格,名称或日期,因此提示保持最新状态,无需手动编辑。
