工具提示 | Tooltips

在本教程中,你将学习如何创建工具提示(当光标悬停在页面上的元素时,显示工具提示),我们将探索两种实现方法:一是Axure RP内置的工具提示功能,通过它可以创建基于浏览器样式的提示;另一种是使用元件创建自定义工具提示,然后再通过鼠标悬停事件将其显示。【原型预览1】【原型预览2】

1、内置的工具提示功能

1.元件设置

  1. 打开一个新的RP文件,双击页面面板中的Page 1将其在画布中打开。
  2. 元件面板中拖拽一个占位符元件到画布中。

2.添加工具提示信息

  1. 选中占位符元件,然后切换到交互面板。
  2. 在面板的右上角,点击更多交互图标。
  3. 在弹出的菜单顶部的工具提示字段中输入“这是一个工具提示”。

3.预览页面

  1. 预览页面,然后将鼠标悬停在占位符元件上,这时候会显示工具提示。
  2. 将鼠标移除占位符元件,工具提示就会消失。

注意:用这种方式创建的工具提示,样式完全取决于浏览器,如果你需要不同样式的工具提示,那么请按照下述步骤创建自定义的工具提示。

2、通过鼠标悬停事件显示的自定义工具提示

1.元件设置

  1. 打开一个新的RP文件,双击页面面板中的Page 1将其在画布中打开。
  2. 元件面板中拖拽一个占位符元件和一个文本标签元件到画布中。
  3. 设置文本标签的文本为“这是一个自定义的工具提示”。
  4. 选中文本标签元件,点击工具栏中或样式面板下的隐藏图表将其隐藏。

2.通过占位符元件的鼠标悬停时时间控制工具提示的可见性

  1. 选中占位符元件,点击交互面板中的新建交互
  2. 在弹出的事件列表中选择鼠标停放时,然后选择显示/隐藏动作。
  3. 目标下拉列表中选择文本标签元件,并保留下面的显示选项。
  4. 点击更多选项,然后在出现的下拉列表中选择弹出效果
  5. 点击确定按钮保存操作。

3.预览交互

  1. 预览页面,将鼠标停放在占位符元件上,一秒钟后,就会显示自定义工具提示。
  2. 在占位符元件上将鼠标移开,工具提示就会再次消失。
其他信息和提示

显示/隐藏带动画的自定义工具提示

要显示带动画的自定义工具提示,请在显示/隐藏动作下的动画列表中选择一个。

要隐藏带动画的自定义工具提示,就不要使用显示/隐藏动作下使弹出效果来自动隐藏工具提示,而是使用占位符元件的鼠标移出时事件,并在该事件下设置显示/隐藏动作来隐藏工具提示。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。