工具提示是短消息，通常用于界面设计，以提供额外的上下文并引导用户采取特定于上下文的操作。这些工具提示可以通过将鼠标悬停在特定的UI元素（如按钮、图标等）上来触发。使用具有特定不透明度响应的**鼠标悬浮（Mouse Over）和鼠标移出（Mouse Out）**触发器，可以在ProtoPie中轻松实现此效果。我们将提供更多有关如何使工具提示在您的原型中无缝工作的提示。

教程目录

在这次教程中，您将学会：

为问号按钮建立鼠标悬停状态。为问号按钮建立鼠标移出状态。

分布教学

1.为问号按钮建立鼠标悬浮状态

选择工具提示层，并将其不透明度设置为0。

2. 由于我们只想将鼠标悬浮在按钮图层上时才显示工具提示图层，因此我 们需要在鼠标离开时将工具提示图层设置为不可见（不透明度为0）。

当鼠标光标移到按钮层上时，将触发其下方的响应。

添加此内容是为了在用户将鼠标悬浮在某个UI元素上时可以触发响应。

3. 向鼠标悬浮（Mouse Over）触发器添加不透明度（Opacity）响应。在不透明度响应中，将工具提示层的不透明度设置为100。

当我们将鼠标悬停在问号按钮层上时，这将触发工具提示层变得可见。

4.向鼠标悬浮（Mouse Over）触发器添加阴影响应。并使用它来更改按钮层下的BG层。在这里，我们只是将数值设置为20，Y值设置为20，模糊值设置为40。（你可以尝试随意设置这些数值）

每当用户将鼠标悬浮在问号按钮上时，我们可以使用阴影响应来突显出问号按钮。

5.让我们查看一下预览窗口。如果现在我们将鼠标悬浮在问号按钮层上时，工具提示就会出现。

2.为问号按钮建立鼠标移出状态

但是，如果我们把鼠标移出，工具提示不会消失。因此，我们需要一个鼠标移出（Mouse Out）触发器来解决这个问题。

在问号按钮层上添加一个鼠标移出（Mouse Out）触发器

当鼠标光标移动到按钮层外时，其下方的响应将会被触发。

2. 向鼠标移出（Mouse Out）触发器添加两个重置响应。在工具提示层上使用其中一个重置响应，然后在BG层上使用另一个响应。

重置工具提示组（下）；重置BG层（上）

为什么我们要使用重置工具？

我们可以使用重置响应使图层或变量回到其真正的初始状态。当我们鼠标移出按钮图层时，我们希望一切都恢复到他的初始状态。因此，我们这次只能使用重置触发器。

工具提示层上的重置响应将使工具提示的不透明度降至0，并使其消失，而BG图层上的另一个重置将重置按钮上的阴影。

3. 现在自己试试吧！它就像一个真正的工具提示一样！然而，如果我们将鼠标悬停在问号按钮图层的上部，由于应用图层的差异，工具提示会看起来很奇怪。

为什么会发生这种情况？

如果我们选择tooltipBG层（位于Tooltip层内），我们将看到它与问号按钮重叠。 如果我们将鼠标悬停在重叠的部分上，那么他将发生2次交互：

只要我们把鼠标悬停设置在问号按钮上，工具提示就会出现。一旦工具提示出现，它会在将我们的鼠标锁定在问号按钮上，移出后鼠标移出将被触发。4. 选择工具提示层，并选中属性面板中的“可触碰低层级图层”选项以修复此问题。

5. 让我们查看一下预览窗口。现在，工具提示层的低层级图层是可触摸的。这意味着，即使出现工具提示层，并且我们自动将鼠标悬浮在工具提示图层上时，也不会触发鼠标移出。