在 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 来显示工具提示。然后我把一个三角形作为 span 的 ::after 伪元素。我使用 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>

在 css 形状上放置工具提示

Put a tooltip on css shape

css

geometry

tooltip

hover

shapes