在 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

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

.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>