有些细节不值得在页面上写一整段。悬停时出现的短注释可以完成这项工作,例如功能卡上的额外上下文或仅图标按钮上的标签。 Elementor 没有内置的方法来执行此操作,因此 工具提示 扩展于 Elementor 的主插件 在每个元素的高级选项卡中添加一个。
您编写工具提示文本,选择它出现的位置以及动画方式,然后将其风格设计为与设计中的任何其他部分一样。没有短代码,也没有 CSS。
Tooltip 扩展名的作用 #
启用后,每个元素元素都会得到一个 工具提示 下节 高级 tab。打开它的一个元素,键入文本,访问者在实时页面上悬停在该元素上时会看到一个小气泡,每个元素都带有自己的工具提示,因此连续三张卡片可以用不同的文本各自解释自己。
扩展名分为两个子选项卡: 设置 为行为(文本、放置、动画、触发、定时)和 风格 观(颜色,宽度,填充,排版)。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?关注 安装指南 首先。
- Tooltips 是一个免费的扩展,因此不需要专业版许可证。
如何启用 Tooltip 扩展 #
从您的 WordPress 仪表板,转到 主插件 并打开 扩展 选项卡。工具提示位于 动态小部件 旁边有流行徽章的团体 动态标签 和包装链接。单击它的切换使其变成紫色,然后点击 保存更改 在顶部等待绿色“设置保存成功”通知。
将工具提示添加到元素中 #
Elementor打开你的页面,选择元素,在视频示例中它是一个三列特征行中的信息框卡。转到 高级 选项卡,打开 工具提示 带有紫色 MA 徽章的部分,然后翻转 工具提示 切换到"是"。设置子选项卡首先打开。
设置已解释 #
- 内容: tooltip文本。键入它,或者如果您想要一个起点,可以使用ai链接写入。
- 放置: 泡沫更喜欢元素的哪一侧:顶部(默认)、底部、左侧或右侧。
- 关注光标: 让工具提示跟踪鼠标而不是静坐。
- 动画: 泡泡是如何进入的 七种选择:无、褪色、移位、移位、尺度、视角、填充效果。
- 触发: 打开工具提示的内容默认情况下悬停。
- 持续时间和延迟: 以毫秒为单位的动画速度以及气泡在关闭前持续多长时间。
- X 和 Y 偏移量: 将气泡推离其默认位置。
- 箭头和箭头类型: 将连接气泡的小指针添加到元素(锐利或圆形)上。
样式工具提示 #
切换到 风格 子选项卡,使气泡与您的设计相匹配,而不是看起来像浏览器默认值。
- 最大宽度: caps 泡沫增长的宽度,在演示中为 200px,因此长文本可以包裹而不是在屏幕上拉伸。
- 文本、背景和箭头颜色: 全颜色控制,包括指针。
- 填充物、边框类型和边框半径: 泡沫的形状。
- 文本对齐、框阴影和版式: 用您自己的字体和深度完成外观。
页面上的结果 #
Save并查看页面 悬停在卡片上,工具提示随着您写的文本逐渐消失,使用您设置的动画、颜色和宽度 将光标移开,延迟后关闭。
Page上的其他元素重复。在演示中,三个功能卡中的每一个都获得了自己的工具提示文本,在面板中写入一次,并服务于每个悬停。
工具提示在哪里可以保留 #
- 功能卡。 一句话额外的细节,没有加长卡片。
- 定价表。 解释一下"优先支持"实际上涵盖了什么,就在人们想知道的地方。
- 按钮和图标。 仅标记图标控件,因此没有人猜测。
- 团队成员。 每张照片上都悬停着有趣的事实或角色注释。
- 技术术语。 术语的简短定义,比术语表页面便宜。
视频教程 #
更喜欢现场观看?该视频将浏览启用扩展、编写工具提示和设计气泡。
常见问题 #
如何在 Elementor 中添加工具提示?
在"主插件扩展选项卡中启用"工具提示扩展,然后在"元素编辑器中选择任意元素,打开"高级选项卡,打开"工具提示开关。在"内容框中键入文本,选择位置和动画,工具提示显示在悬停状态。
我可以向任何 Elementor 小部件添加工具提示吗?
是。工具提示部分出现在每个元素的高级选项卡上:小部件、列、容器和部分。每个元素都保留自己的工具提示文本和设置,因此同一页面的不同卡片可以说不同的话。
我可以设置工具提示来匹配我的网站吗?
是。Style子选项卡控制最大宽度,文本颜色,背景颜色,箭头颜色,填充,边框,边框半径,文本对齐,框阴影和排版。气泡可以匹配您的品牌,而不是看起来像浏览器默认值。
工具提示支持哪些动画?
None、Fade、Shift-Away、Shift-Toward、Scale、Perspective、Fill Effect 七种选项,您还可以控制动画持续时间(以毫秒为单位)以及光标离开后工具提示关闭之前的延迟。
Tooltip 扩展是免费的吗?
是的。工具提示附带了 Elementor 的 Master Addons 免费版本,位于"扩展"选项卡的动态小部件组中。 定价页面 显示 Pro 计划在免费扩展之外添加的内容。
包裹起来 #
Elementor 的 Tooltip 扩展程序在您构建的任何内容上都放置了一个小型的、可风格化的悬停注释:在高级选项卡上翻转开关,编写文本,选择位置和动画,并一次对气泡进行样式化。它的读数就像您设计的一部分,而不是浏览器剩余的。对于更多高级选项卡升级,请浏览 主插件小部件和扩展或者看看 玻璃态扩展 为另一种单切换效果。
