原型设计工具Axure RP新手教程（十二）：工具提示

在本教程中，您将学习如何创建将鼠标悬停在页面上的元素上时出现的工具提示。您将通过两种探索方法来做到这一点：Axure RP的内置工具提示功能（用于创建浏览器样式的工具提示）以及Mouse Hover事件（可用于显示使用小部件创建的自定义工具提示）。

在本教程中，您将学习如何创建将鼠标悬停在页面上的元素上时出现的工具提示。您将通过两种探索方法来做到这一点：Axure RP的内置工具提示功能（用于创建浏览器样式的工具提示）以及Mouse Hover事件（可用于显示使用小部件创建的自定义工具提示）。（点击此处可查看本教程视频操作）

内置工具提示功能

小部件设置

• 打开一个新的RP文件，然后在Pages（页面）窗格中双击Page1（页面1）以在画布上将其打开。

• 将一个占位符小部件从Libraries（库）窗格拖到画布上。

添加工具提示文字

• 选择占位符，然后切换到Interactions（交互）窗格。
  

• 在窗格的右上角，单击More Interactions（更多交互）图标。
  

• 在出现的菜单顶部，在工具提示字段中进入This is a tooltip！。
  

预览页面

• 预览页面并将光标悬停在占位符上以显示工具提示。

• 将鼠标移离占位符，工具提示将再次消失。

提示：以这种方式创建的工具提示的样式完全由Web浏览器控制。 如果您需要使工具提示看起来不同，请按照下一部分中的步骤创建自定义工具提示。

鼠标悬停时显示的自定义工具提示

• 打开一个新的RP文件，然后在Pages（页面）窗格中双击Page1（页面1）以在画布上将其打开。

• 从Libraries（库窗格中将占位符小部件和标签小部件拖到画布上。

将标签小部件上的文本设置为This is a tooltip！。

• 通过选择标签小部件并单击Style（样式）窗格或样式工具栏中的Hidden（隐藏）图标来隐藏标签小部件。

在占位符的鼠标悬停事件中显示工具提示

• 用占位符的鼠标显示工具提示选择占位符，然后在Interactions（交互）窗格中单击New Interaction（新建交互）。

• 在出现的列表中选择Mouse Hover（鼠标悬停）事件，然后选择Show/Hide（显示/隐藏）操作。

• 在Target（目标）下拉列表中选择标签小部件，然后在其下方保留显示。

• 单击确定以保存操作。

使用占位符的鼠标退出事件隐藏工具提示

• 在仍选择占位符的情况下，再次单击New Interaction（新建交互）。

• 选择Mouse Exit（鼠标退出）事件，然后选择Show/Hide（显示/隐藏）动作。

• 再次定位标签小部件，然后选择其下方的Hide（隐藏）。

• 单击确定以保存操作。

预览页面

• 预览页面，然后将光标悬停在占位符上。大约一秒钟后，将出现自定义工具提示。

• 将鼠标移离占位符，工具提示将再次消失。

附加信息和提示

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

想要获得Axure RP更多资源、正版授权的伙伴，请咨询【客服】了解

标签：