完美指向的工具提示：指向角落

Ready for the last challenge?

准备好最后的挑战了吗？

We are still creating tooltips that follow their anchors, and this time we will work with new positions and learn new tricks. I will assume you have read and understood the first two parts, as I will skip the things I already explained there. Fair warning, if you haven’t read those first two you might get a little lost.

我们仍在创建跟随其锚点的工具提示，这次我们将处理新的位置并学习新的技巧。我将假设你已经阅读并理解了前两部分，因为我将跳过我在那儿已经解释过的内容。公平的警告，如果你没有阅读前两部分，你可能会有点迷失。

At the time of writing, only Chrome and Edge have full support of the features we will be using.

在撰写本文时，只有 Chrome 和 Edge 完全支持我们将要使用的功能。

As usual, a demo of what we are making:

和往常一样，展示我们正在制作的内容：

This time, instead of considering the sides, I am considering the corners. This is another common pattern in the tooltip world. The code structure and the initial configuration remain the same as in the previous examples, so let’s jump straight into the new stuff.

这次，我不是考虑边，而是考虑角落。这是工具提示世界中的另一种常见模式。代码结构和初始配置与之前的示例保持一致，因此让我们直接跳入新内容。

If you took the time to explore my interactive demo, you already know the position we will start with:

如果你花时间探索过 我的互动演示，你已经知道我们将要开始的位置：

position-area: top left;Code language: CSS (css)

position-area: top left;代码语言：CSS (css)

The other positions will logically be top right, bottom left, and bottom right. We already learned that defining explicit positions is not the ideal choice, so let’s flip!

其他位置将逻辑上是top right、bottom left和bottom right。我们已经了解到，定义明确的位置并不是理想的选择，所以让我们翻转一下！

The flipped values are:

翻转的值是：

position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; Code language: CSS (css)

position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; 代码语言：CSS (css)

The advantage of this configuration is that we are not using flip-start, so we can safely define min-width (or max-height) without issue. The drawback is that adding the tail is complex. It needs to be placed on the corners, and the margin trick won’t work. We need another hack.

这种配置的优点是我们没有使用flip-start，因此可以安全地定义min-width（或max-height），没有问题。缺点是添加尾部比较复杂。它需要放置在角落，margi...