简介
工具提示是简短的信息，通常用于界面设计中，以提供额外的上下文并引导用户执行特定于上下文的操作。这些工具提示可通过将鼠标悬停在特定的 UI 元素（如按钮、图标等）上来触发。在 ProtoPie 中，使用 Mouse Over 和 Mouse Out 触发器配合特定的 opacity 响应即可轻松实现此效果。我们还将提供更多技巧，帮助你在原型中让工具提示无缝运行。
你将 学到什么
在本课中，你将学习如何：
为问号按钮创建鼠标悬停状态
为问号按钮创建鼠标移出状态
最后，你将能够做出类似这样的效果！
分步说明
1. 为问号按钮创建 Mouse-Over 状态
1. 选择 Tooltip 图层，并将其 opacity 设置为 0。
由于我们希望仅在鼠标悬停于 Button 图层上时才显示 Tooltip 图层，因此需要在初始状态下（鼠标移开时）将 Tooltip 图层设为不可见（opacity 设为 0）。
2. 在 Question mark button 图层上添加 Mouse Over 触发器。
当鼠标光标移到 Button 图层上方时，其下的响应将被触发。
这样可以在用户将鼠标悬停在某个 UI 元素上时触发响应。
3. 为 Mouse Over 触发器添加一个 Opacity 响应。在 Opacity 响应中，将 Tooltip 图层的不透明度设置为 100。
这样当我们将鼠标悬停在问号按钮图层上时，Tooltip 图层就会变为可见。
4. 为 Mouse Over 触发器添加一个 Shadow 响应。并将其用于更改 Button 图层下方的 BG 图层。这里我们仅将 Fill 值设为 20、Y 值设为 20、Blur 值设为 40。（你也可以随时调整这些值）
我们使用 Shadow 响应在用户将鼠标悬停其上时高亮问号按钮。
5. 在预览窗口中检查一下。现在如果我们将鼠标悬停在问号按钮图层上，工具提示就会出现。
2. 为问号按钮创建 Mouse-Out 状态
但如果我们把鼠标移开，工具提示不会消失。因此，我们需要一个 Mouse Out 触发器来解决这个问题。
1. 在 Question mark button 图层上添加一个 Mouse Out 触发器。
当鼠标光标移出 Button 图层时，其下的响应将被触发。
2. 为 Mouse Out 触发器添加两个 Reset 响应。其中一个 Reset 响应用于 Tooltip 图层，另一个用于 BG 图层。
💡 为什么我们要使用 Reset？
我们可以使用 Reset 响应让图层或变量精确回到其初始状态。当我们对 Button 图层执行 Mouse Out 时，我们希望一切都恢复到初始状态。所以这次我们可以直接使用 Reset 触发器。
Tooltip 图层上的 Reset 响应会将工具提示的不透明度恢复到 0 并使其消失，而 BG 图层上的另一个 Reset 会重置按钮上的阴影。
3. 现在你自己试试看！它看起来就像一个工具提示！不过，如果我们悬停在问号按钮图层的上半部分，由于应用图层的差异，工具提示看起来会有些奇怪。
💡 这是为什么？
如果我们选中 **tooltipBG **图层（它位于 Tooltip 图层内部），会看到它与 Question mark button 有重叠。
如果我们将鼠标移到重叠区域上，会发生 2 个交互：
由于我们正在悬停于问号按钮上，工具提示会出现。
一旦工具提示出现，它会挡住我们在问号按钮上的鼠标，然后就会触发 Mouse Out。
4. 选择 Tooltip 图层，并在属性面板中勾选 Make Lower Layers Touchable 选项来修复此问题。
5. 在预览窗口中检查一下。现在 Tooltip 图层下方的图层可被触碰。这意味着即使 Tooltip 图层出现，并且我们自动将鼠标悬停在 Tooltip 图层上，也不会触发 Mouse Out。
恭喜！
最后，我们学习了如何使用 Mouse over、Mouse out 触发器以及 Opacity 响应来制作可用的工具提示。我们还学习了一些在 ProtoPie 中实现此效果的实用技巧。做得很棒，你已经完成了本教程！
试着基于这些学习内容多做尝试，你将能够创建更多有趣的交互！我们很想看到你的大胆实验。创建你自己的原型，并在 Twitter 或 Instagram 上使用 #MadeWithProtoPie 分享出来吧
