CSS中未显示提示框

Question

我想在鼠标悬浮在图片上时显示一个工具提示框。我不能使用JQuery或任何其他插件，必须使用纯CSS。我在这里看到了一个演示。

http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-simple-css3-tooltip/tooltip_demo.html

我的代码:

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

http://jsfiddle.net/txeF2/

不知为何我无法获得提示框。

更新：http://jsfiddle.net/Md5E6/4/

- Prithviraj Mitra

---

也许您应该先复制链接示例中的HTML结构。 - Paulie_D

Answer 1

这里有一个解决方案：示例在此 将.tooltip的inline改为inline-block:

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

然后从子元素img中删除绝对定位。这是导致主要问题的原因；由于该元素已从文档流中移除，因此导致父元素没有尺寸并折叠在自身上。

- Josh Crozier

---

谢谢Josh。但不幸的是，我必须在class graph内使用position:absolute。 - Prithviraj Mitra

我已经更新了fiddle，现在我能够看到这个框，但是框的位置离图片太远了。http://jsfiddle.net/Md5E6/3/ - Prithviraj Mitra

@PrithvirajMitra 嗯，正如我所说的，问题在于当子元素绝对定位时，父元素没有尺寸。如果子元素需要绝对定位，则必须明确设置父元素的尺寸；请查看此示例http://jsfiddle.net/fMXL8/。子元素是绝对定位的，但它能够工作是因为已经设置了父元素的尺寸。 - Josh Crozier

太棒了，非常感谢您解释原因。我没有考虑到父元素的尺寸。再次感谢。 - Prithviraj Mitra

Answer 2

使用如下代码显示提示框

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

如果您想查看完整的代码和演示，这里有一个完整的教程 创建CSS3工具提示

- eddy

Answer 3

对我来说，原因是我的父级 div 具有属性 "pointer-events: none"。移除此属性后，子 div 的工具提示未显示问题得到解决。

- Jolly Good