在我的产品Front Prep的问题列表页面上，我在面试问题旁边显示公司标志。当您将鼠标悬停在标志上时，工具提示会显示公司名称。我将工具提示延迟设置为0，因此当我将光标移过页面时，工具提示会立即出现。为了解决这个问题，我添加了200ms的过渡延迟，但这产生了一个新问题：在多个标志之间移动意味着每次都要等待相同的200ms延迟，感觉反应迟钝。
这篇文章讨论的是浏览器工具栏和网站中发现的一个小交互模式。我的解决方案分为三个部分：悬停在标志上时，工具提示等待200ms后打开。当工具提示关闭时，一个300ms的计时器开始，我称之为暖窗口。如果在此计时器运行时悬停在另一个标志上，工具提示会立即打开，跳过延迟。当计时器到期时，页面变冷，200ms的等待恢复。
在Front Prep中，我的工具提示是使用Radix和Motion构建的。代码使用useContext变量在组件之间跟踪isWarm状态。悬停时，组件检查页面是否温暖；如果是，工具提示立即打开；否则，它启动一个200ms的计时器。show函数将温暖状态复制到一个即时标志中，CSS使用该标志通过数据属性跳过进入动画。
这种模式通过避免即时弹出和迟钝延迟来改善用户体验。这是一个简单的方法，您可以在自己的代码库中实现。
关键实体：公司：Front Prep
FAQ：什么是工具提示的暖窗口模式？
暖窗口模式在工具提示打开前添加200ms的延迟，但关闭后，一个300ms的冷却计时器开始。如果您在这个冷却期间悬停在另一个工具提示上，它会立即打开，避免在相邻元素之间移动时重复延迟。
来源: Hacker News · 由HeadlinesBriefing整理摘要