在CSS形状上放置一个工具提示

Question

我有由CSS制成的圆形形状，我正在尝试放置一个悬停在圆圈时出现的工具尖端，对如何做到这一点？这是我的圆形代码：

#circle1 {
	width: 52px;
	height: 52px;
	background: #f5e25d;
    opacity: 0.9
	-moz-border-radius: 50%;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

<div id="circle1"></div>

Answer 1

您可以通过将HTML元素放入#circle1（我使用span）中的HTML元素来实现此目标，并使用#circle1:hover显示工具提示。然后，我将三角形作为span的::after伪元素。我使用CSS三角发生器来创建工具提示三角形。

.wrap {
  overflow: auto;
  padding: 10%;
  width: 100%;
  background: #eee;
  box-sizing: border-box;
}
#circle1 {
  display: block;
  width: 52px;
  height: 52px;
  background: #f5e25d;
  opacity: 0.9 -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin: 20px auto auto;
  position: relative;
}
span.tooltip {
  visibility: hidden;
  position: absolute;
  bottom: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  background: #444;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  text-align: center;
  font-family: sans-serif;
}
span.tooltip::after {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 5px 0 5px;
  border-color: #444444 transparent transparent transparent;
}
#circle1:hover span.tooltip {
  visibility: visible;
}

<div class="wrap">
  <a id="circle1">
    <span class="tooltip">Tooltip, baby, yeah!</span>
  </a>
</div>