css - 将工具提示放在 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)作为工具提示，并使用 #circle1:hover 显示工具提示。然后，我将一个三 Angular 形作为 span 的 ::after 伪元素。我用了 CSS Triangle Generator创建工具提示三 Angular 形。

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