css - 使用 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/

Answer 1

这是一个解决方案:EXAMPLE HERE

将 .tooltip 从 inline 更改为 inline-block:

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

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