工具提示框未使用css显示

我试图在悬停图像上显示工具提示框。我将无法使用jquery或任何其他插件。我必须使用纯css。我在这里看到了一个演示

我的代码：

<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one">  </a>

Jsfiddle：

由于某些原因，我无法获取工具提示框

更新了：

这里有一个解决方案：

将

工具提示

从

内联

更改为

内联块

：

.tooltip {
    display: inline-block;
    position: relative;
}

---

然后从子

img

元素中移除绝对定位。这是主要问题的根源；由于元素已从文档流中移除，因此导致父元素没有维度并自行折叠。

使用类似的方式显示工具提示

<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>

 .tooltip
 {
  display: inline;
  position: relative;
 }

 .tooltip:hover:after
 {
  background: #333;
  background: rgba(0,0,0,.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(title);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
 }

---

对我来说，原因是我的父div有一个属性“指针事件：无”。删除此选项修复了我的工具提示不显示子分区的问题。

也许您应该首先在链接的示例中重现HTML结构。谢谢Josh。但不幸的是，我不得不在类图中使用position:absolute。我已经更新了小提琴，现在我得到了盒子，但是盒子的位置离图像太远了。@PrithvirajMitra-Well；正如我所说，问题是当子元素完全定位时，父元素没有维度。如果子元素需要绝对定位，则需要显式设置父元素的维度；看看这个例子，子元素是绝对定位的，但是因为父元素的维度已经设置好了，所以它可以工作。非常感谢您解释原因。我错过了父元素的维度。再次感谢。