如何防止 CSS 工具提示溢出？

假设您有一些带有 CSS 工具提示 的元素，并且您要定位这些工具提示，使其在悬停时（或者可能更好：单击/点击时）在元素旁边打开。在它旁边哪里？在它上面？如果元素已经非常靠近屏幕顶部怎么办？在这种情况下，它可能应该在它下面打开。反之亦然——左右边缘也是如此。您绝对希望它可见，而不是溢出视口。

有时，当您打开新的 UI 元素时，它们需要能够感知边缘，以防止内部内容触发奇怪的滚动条，或者更糟糕的是，截断内容。

这是网络上一个由来已久的问题。我记得曾经故意使用 jQuery UI 工具提示，因为它具有这种特殊的边缘感知能力。您可以想象它背后的 JavaScript 代码。您找出元素将要位于哪里，并使用定位数学来确定它是否在视口内。如果不在，则尝试不同的位置，该位置确实适合。

一如既往，所有旧事物都是新的。查看专门为此问题设计的 Floating UI。

Floating UI 是一款低级工具包，用于定位浮动元素，同时智能地保持它们在视野中。工具提示、弹出窗口、下拉菜单、菜单等等。

它看起来非常棒。我喜欢它的重点，演示做得非常好，而且它是一个非常小的依赖项。

但您知道什么会更酷吗？如果 CSS 可以独立完成所有这些操作。这就是 CSS 锚定定位 的风格——目前只是一个“说明”文档。

在构建交互式组件或应用程序时，作者经常希望利用可以在“顶层”呈现的 UI 元素。此类 UI 元素的示例包括内容选择器、教学 UI、工具提示和菜单。 “启用弹出窗口” 引入了一个新的 popup 元素，使这些顶层元素中的许多更容易创作。

作者经常希望将此类顶层 UI “固定”或“锚定”到另一个元素上的某个点，这里称为“锚元素”。顶层 UI 相对于其锚元素的定位方式会进一步受到布局视口边缘的影响或限制。

我喜欢它。网络平台在它最好的状态。了解作者需要做什么并寻求库来完成，并试图介入并以原生方式（并希望更好地）完成它。