1个设计有时需要一个简短的说明,而不需要在页面上给它满行,那就是工具提示的工作:一个小气泡出现在悬停上,说出它的那一块,然后让开 工具提示小部件 在 Elementor 的主插件 将气泡连接到图标、文本或图像,并控制放置、动画、触发器和样式。
本指南将小部件从第一次拖动到实时页面上的样式工具提示中。
Tooltip 小部件的作用 #
Widget 在您的页面上放置一个小目标元素,一个图标、文本或图像,并绑定一个工具提示泡泡到它上,当访问者悬停或单击目标时,泡泡会与您的消息一起出现,放置、动画、定时和偏移量都是可配置的,Style 选项卡同时覆盖目标和泡泡。
这是一个独立的小部件:目标及其工具提示是全部要点,如果您想将工具提示添加到页面上已有的小部件中,Master Addons 还会提供一个工具提示扩展,该扩展附加到任何 Elementor 元素。当工具提示目标是其自己的小设计元素时,小部件是正确的选择,就像价格旁边的信息图标或带有名称泡沫的团队头像。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 在基本小部件下的主插件选项面板中启用的工具提示小部件。
如何添加 Tooltip 小部件 #
在 Elementor 编辑器中,搜索 元素 面板为 工具提示 并将小部件拖到您的页面上。它加载一个信息图标作为默认目标,并且占位符工具提示已经接线,因此将图标悬停在画布上可以立即显示气泡。
选择内容类型:图标、文本或图像 #
打开 内容设置 在"内容"选项卡中。 内容类型 置顶部的切换器提供三个目标:
- 图标: elementor 库中挑选任意一个图标, 经典的信息圈是默认的。
- 文: 键入一个单词或短语,例如“hover Me!”,工具提示附着在上面。
- 图片: 从媒体库中选择图像,这对于头像和产品缩略图很有用。
每种类型都适用两个控件。 对齐 将目标放置在左侧、中间或右侧。 HTML 标签 将目标包裹在您选择的标记中:h1 到 H6、div、span、p、按钮或 a。 粘贴 p 或 span 以获取简单的工具提示;当目标应该像控制一样实现可访问性时使用按钮。
与 文本 "已选中 ", 内容字段将替换图标选择器:
与 图像 selected, 媒体库打开, 所选图像成为悬停目标:
写入工具提示并设置其行为 #
的 工具提示选项 部分控制气泡本身。
- 工具提示文本: bubble内部的消息。保持在一两行;工具提示是提示,而不是段落。
- 关注光标: 让气泡跟踪鼠标,而不是固定在目标上。
- 放置: 气泡相对于目标所在的位置。 Top 是默认值,Top Start、Bottom 和其他边可用。
- 动画: 气泡如何进入,默认情况下为转移。
- 触发: Hover 显示鼠标悬停上的气泡;点击等待点击,这在触摸屏上也效果更好。
- 持续时间和延迟: animation速度和光标离开后泡沫会持续多久,默认情况下都是300毫秒,默认值对于大多数页面来说感觉都很合适;只有当工具提示携带访问者需要更长时间的读取时,才会减慢速度。
的 X 偏移量 並 Y 偏移量 sliders 将气泡从其默认位置推开。当工具提示需要清除边界或坐在形状奇怪的目标旁边时,很有用。
样式目标 #
在 风格 选项卡, 一般风格 覆盖页面上的目标元素。
- 内容宽度和填充: target block的大小,演示将它从150像素加宽到215像素,给头像空间。
- 正常状态和悬停状态: 每个状态的背景颜色、文本颜色、框阴影和版式。
- 边界类型和边界半径: 框架目标; 4 像素半径可保持角柔软。
设置工具提示气泡 #
的 工具提示样式 部分设计了气泡的样式,画布会在您工作时实时预览它。
- 工具提示宽度: bubble的最大宽度,默认情况下为200像素,文字包裹在里面。
- 背景颜色和文本颜色: 该演示版采用深色海军蓝,白色文本,经典的高对比度工具提示外观。
- 版式、填充、边框: 泡沫的文本和框架。
- 距离: 泡沫和目标之间的间隙,默认为 10 像素。
- 文本对齐和框阴影: 最后的触摸。柔和的阴影有助于将气泡读作漂浮在页面上方。
页面上的结果 #
Live页面上,目标静静地坐着,直到访问者将其悬停,然后气泡在您选择的位置动画化,在光标停留期间保持,并在您设置的延迟后淡出。
常见用例 #
- 信息图标 除了定价行之外,还形成标签和功能列表。
- 团队头像 这揭示了悬停上的名字和角色。
- 术语表术语 在文本中,气泡中有简短的定义。
- 产品缩略图 带有不值得页面空间的规格或注释。
- 仅图标按钮 工具提示命名操作的位置。
获得更好工具提示的提示 #
- 保持文字简短。 1两行,如果消息需要更多,就属于布局,而不是工具提示。
- 使用点击触发器来触摸访客。 Hover 在手机上不存在;点击触发的工具提示在任何地方都有效。
- 注意对比。 暗泡、浅文本或反面。200 个像素(10 个填充)的默认宽度在典型字体大小下读取良好。
- 检查屏幕边缘附近的位置。 页面第一个元素上的顶部工具提示可以剪辑;将其切换到底部或使用偏移量。
- 不要在工具提示中隐藏关键信息。 访问者必须阅读的任何内容都属于页面;气泡是额外的。
视频教程 #
如果您更愿意观看工具提示的操作,这段短视频涵盖了整个设置,从将小部件拖入到实时页面上的样式气泡。
常见问题 #
Master Addons 中的 Tooltip 小部件是什么?
Elementor小部件,在页面上放置图标、文本或图像,并在其上附加一个工具提示气泡,气泡出现在悬停或点击中,您从Elementor面板控制其放置、动画、定时、偏移和完整造型。
工具提示目标可以是图像吗?
是在内容设置中设置内容类型为图像,并从媒体库中选择任何图像,然后当访问者悬停或单击图像时,工具提示会出现,这适合团队头像和产品缩略图。
我可以在单击时显示工具提示而不是悬停吗?
是在工具提示选项中,将触发器从悬停更改为点击,点击触发在手机和平板电脑上也表现得更好,而这些地方不存在悬停。
如何更改工具提示出现的位置?
Tooltip 选项中的放置下拉来选择顶部、底部或每个边的一个起始或结束变体,然后 X 偏移和 Y 偏移滑块微调精确的位置,并且距离设置与目标的间隙。
我可以对工具提示泡沫进行风格调整吗?
是。样式选项卡中的工具提示样式部分控制气泡的宽度、背景颜色、文本颜色、排版、填充、边框、与目标的距离、文本对齐和框阴影。编辑器实时预览更改。
包裹起来 #
Tooltip 小部件在一个地方处理整个提示-泡沫模式:从 Elementor 面板中选择图标、文本或图像目标、写入消息、设置触发器和放置位置以及为两半设置样式。浏览全套 主插件小部件和扩展 对于 Tooltip 扩展名和框中的其他所有内容,请参阅 定价页面 pro 添加的内容。
