本 CSS 代码片段可帮助你为工具提示组件设计带箭头的方提示框，每款提示工具都有不同的颜色和形状，没有边框半径，您可以将其集成到您的工具提示项目中，当用户将鼠标悬停在特定内容上时，它可以提供有用的信息或解释，从而增强用户体验。此外，这些工具提示还可以自定义颜色、方向和形状，因此可以满足各种设计需求。

下面展示如何用 CSS 创建带箭头的工具提示框

1.首先设置 HTML 结构。使用带有 "tooltip "类和其他方向类（如 "top"、"right"、"left "或 "bottom"）的 <div> 元素来确定箭头在工具提示中的方向。

<div class="tooltip top" style="--c: #79bd9a;">
   这是一个简单的工具提示，颜色为蓝色的下提示框
</div>
<div class="tooltip right" style="--c: #8a9b0f;">
   这是一个简单的工具提示，颜色为绿色的左提示框
</div>
<div class="tooltip left" style="--c: #eb6841;">
   这是一个简单的工具提示，颜色为橘色的右提示框
</div>
<div class="tooltip bottom">
   这是一个简单的工具提示，颜色为红色的上提示框
</div>

2.在 CSS 部分，定义工具提示和箭头指针的样式。变量--b（基数）和--h（高度）可控制箭头的尺寸。根据设计偏好自定义颜色、字体大小、填充和其他属性。

对于每个方向类（上、右、左、下），在 CSS 中定义 clip-path 属性。剪贴路径通过指定坐标来塑造箭头。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height*/

  border-image: fill 0//var(--h)
    conic-gradient(var(--c,#CC333F) 0 0); 
 margin: 5px;
}

您可以通过调整变量和样式来定制颜色、尺寸和其他属性，以匹配您的项目设计。