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

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具， 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP

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

内置工具提示功能

小部件设置

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

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

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

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

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

预览页面

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

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

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

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

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

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

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

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

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

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

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

• 单击确定以保存操作。

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

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

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

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

• 单击确定以保存操作。

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

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

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

关注慧聚IT微信公众号???，了解产品的最新动态及最新资讯。