如何在 css 中实现类似工具提示的东西？答案

【问题标题】：How to implement this stuff like tooltip in css?如何在 css 中实现类似工具提示的东西？
【发布时间】：2017-12-12 05:49:59
【问题描述】：

我需要通过 CSS 或 Javascript 创建以下组件。

我会收到一个类似[{'label':'status1'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].的数组

它还支持支持红色高亮，如下所示。在这种情况下，它会收到一个类似[{'label':'status1', 'priority': 'high'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].的数组

它还支持点击和悬停事件，如下所示。

其实我主要是不明白如何实现如下小图的形状。

【问题讨论】：

为什么是javascript标签？谷歌 CSS 三角形。
这可能对你有帮助codepen.io/ryanmcnz/pen/JDLhu
另一个：cssarrowplease.com 谷歌搜索“css 三角形框”会得到很多好的答案。就工具提示而言，许多 CSS 框架（如 Bootstrap）使这变得简单。可能还有很多 npm 包。
w3schools.com/css/css_tooltip.asp

标签： javascript html css reactjs

【解决方案1】：

这里，只针对形状和悬停效果的解决方案。

Fiddle

<ul class="status">
  <li><a href=""><span>#</span>Status 1</a></li>
  <li><a href=""><span>#</span>Status 2</a></li>
  <li><a href=""><span>#</span>Status 3</a></li>
  <li><a href=""><span>#</span>Status 4</a></li>
  <li><a href=""><span>#</span>Status 5</a></li>
  <li><a href=""><span>#</span>Status 6</a></li>
</ul>

【讨论】：

非常感谢。
嗨，库马尔。我看了你的代码大约一年，但我不能完全理解它。因为当我检查 chrome 中的 html 元素时，我发现 '.status li a:before' 和 '.status li a:after' 是同一个地方，为什么？以及泡沫之类的东西（三角形）是如何产生的？它来自css边框属性？谢谢。
嗨 Liam，CSS 伪 :before 和 :after 可以在没有 HTML 元素的 CSS 中生成内容。因为这些，两者都是position: absolute，所以我可以放在任何我想要的地方。关于 css 三角形read this。带有边框属性的三角形是可能的。 :after 用于三角形的边框。

【解决方案2】：

要创建带有箭头的框，有两种解决方案：SVG、CSS3 或图像（最糟糕的）。有关 CC3 示例，请参见上面的 cmets。

在 CSS 中使用 :hover 可以使它在 CSS 中改变颜色。

要使其可选择，请在每个更改组件状态的框上添加一个单击事件侦听器。在render 中使用该状态来添加或不添加类似.selected 的类。然后再次在 CSS 中给这个类一些其他颜色

【讨论】：

【解决方案3】：

这是另一个使用伪元素、位置和变换的形状的解决方案。

.container {
  font-size: 0;
}

.box {
  position: relative;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 75px;
  width: 100px;
  border: 3px solid black;
  background: white;
}

.box:not(:last-of-type) {
  border-right: none;
}

.box:not(:last-of-type):after {
    content: '';
    background: inherit;
    height: 8px;
    width: 8px;
    position: absolute;
    left: 101%;
    top: 50%;
    z-index: 1;
    border-top: 3px solid black;
    border-right: 3px solid black;
    transform: rotateZ(45deg) translate(-50%);
}

<div class="container">
  <div class="box">
    <span>#</span>
    <span>Status 1</span>
  </div>
  <div class="box">
    <span>#</span>
    <span>Status 2</span>
  </div>
  <div class="box">
    <span>#</span>
    <span>Status 3</span>
  </div>
</div>

【讨论】：