在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）内部放置工具提示，并使用#circle1:hover显示工具提示来实现此目的。然后我将一个三角形作为::after的{​​{1}}伪元素。我使用CSS Triangle Generator来创建工具提示三角形。

＆＃13;

＆＃13;

span

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;