工具提示

有些细节不值得在页面上写一整段。悬停时出现的短注释可以完成这项工作,例如功能卡上的额外上下文或仅图标按钮上的标签。 Elementor 没有内置的方法来执行此操作,因此 工具提示 扩展于 Elementor 的主插件 在每个元素的高级选项卡中添加一个。

您编写工具提示文本,选择它出现的位置以及动画方式,然后将其风格设计为与设计中的任何其他部分一样。没有短代码,也没有 CSS。

Tooltip 扩展名的作用 #

启用后,每个元素元素都会得到一个 工具提示 下节 高级 tab。打开它的一个元素,键入文本,访问者在实时页面上悬停在该元素上时会看到一个小气泡,每个元素都带有自己的工具提示,因此连续三张卡片可以用不同的文本各自解释自己。

扩展名分为两个子选项卡: 设置 为行为(文本、放置、动画、触发、定时)和 风格 观(颜色,宽度,填充,排版)。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?关注 安装指南 首先。
• Tooltips 是一个免费的扩展,因此不需要专业版许可证。

如何启用 Tooltip 扩展 #

从您的 WordPress 仪表板,转到 主插件 并打开 扩展 选项卡。工具提示位于 动态小部件 旁边有流行徽章的团体 动态标签 和包装链接。单击它的切换使其变成紫色,然后点击 保存更改 在顶部等待绿色“设置保存成功”通知。

将工具提示添加到元素中 #

Elementor打开你的页面,选择元素,在视频示例中它是一个三列特征行中的信息框卡。转到 高级 选项卡,打开 工具提示 带有紫色 MA 徽章的部分,然后翻转 工具提示 切换到"是"。设置子选项卡首先打开。

设置已解释 #

• 内容: tooltip文本。键入它,或者如果您想要一个起点,可以使用ai链接写入。
• 放置: 泡沫更喜欢元素的哪一侧:顶部(默认)、底部、左侧或右侧。
• 关注光标: 让工具提示跟踪鼠标而不是静坐。
• 动画: 泡泡是如何进入的 七种选择:无、褪色、移位、移位、尺度、视角、填充效果。
• 触发: 打开工具提示的内容默认情况下悬停。
• 持续时间和延迟: 以毫秒为单位的动画速度以及气泡在关闭前持续多长时间。
• X 和 Y 偏移量: 将气泡推离其默认位置。
• 箭头和箭头类型: 将连接气泡的小指针添加到元素(锐利或圆形)上。

样式工具提示 #

切换到 风格 子选项卡,使气泡与您的设计相匹配,而不是看起来像浏览器默认值。

• 最大宽度: caps 泡沫增长的宽度,在演示中为 200px,因此长文本可以包裹而不是在屏幕上拉伸。
• 文本、背景和箭头颜色: 全颜色控制,包括指针。
• 填充物、边框类型和边框半径: 泡沫的形状。
• 文本对齐、框阴影和版式: 用您自己的字体和深度完成外观。

页面上的结果 #

Save并查看页面 悬停在卡片上,工具提示随着您写的文本逐渐消失,使用您设置的动画、颜色和宽度 将光标移开,延迟后关闭。

Page上的其他元素重复。在演示中,三个功能卡中的每一个都获得了自己的工具提示文本,在面板中写入一次,并服务于每个悬停。

工具提示在哪里可以保留 #

• 功能卡。 一句话额外的细节,没有加长卡片。
• 定价表。 解释一下"优先支持"实际上涵盖了什么,就在人们想知道的地方。
• 按钮和图标。 仅标记图标控件,因此没有人猜测。
• 团队成员。 每张照片上都悬停着有趣的事实或角色注释。
• 技术术语。 术语的简短定义,比术语表页面便宜。

视频教程 #

更喜欢现场观看?该视频将浏览启用扩展、编写工具提示和设计气泡。

常见问题 #

包裹起来 #

Elementor 的 Tooltip 扩展程序在您构建的任何内容上都放置了一个小型的、可风格化的悬停注释:在高级选项卡上翻转开关,编写文本,选择位置和动画,并一次对气泡进行样式化。它的读数就像您设计的一部分,而不是浏览器剩余的。对于更多高级选项卡升级,请浏览 主插件小部件和扩展或者看看 玻璃态扩展 为另一种单切换效果。