在
网站建设过程中工具提示是CSS中使用多年的一种非常常见的模式。在CSS中有很多方法可以实现工具提示，尽管有些方法需要的神奇数字让人头疼。今天深圳尼高网站建设公司和大家分享一下CSS工具提示。
在此之前我们探索了色带形状以及使用CSS渐变和clip-path()。这一次，我想探索另一种形状，一种您可能在前端生活中至少遇到过一次的形状:工具提示。你知道我们在说什么，那些看起来像漫画书里的演讲泡泡的小东西。它们在野外随处可见，从按钮的悬停效果到你手机上的短信应用程序。
大家感觉CSS中的形状看起来很容易制作，但它总是以大量的斗争结束。例如，如何调整尾部的位置来指示工具提示是来自左侧、右侧还是中间位置？有需要考虑的因素很多制作工具提示时—包括溢出量, 冲突检出，以及语义学——但我想关注的是尾巴的形状和方向，因为我经常看到用于定位它们的不灵活的固定单元。
忘记您已经知道的关于工具提示的知识，因为在本文中，我们将从零开始，您将学习如何使用现代CSS支持的最少标记来构建工具提示，该工具提示提供了通过调整CSS变量来配置组件的灵活性。我们不会构建一两个形状，但是…100种不同的形状！
这听起来像是我们正在进入一篇超长的文章，但实际上，我们可以通过调整一些值轻松实现这一目标。最终，您将拥有一个装满CSS技巧的后口袋，这些技巧可以组合起来创建任何您想要的形状。
