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元素中删除绝对定位。这导致了主要问题;因为元素已从文档流中移除，从而导致父元素没有维度并自行折叠。

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

如果您想通过演示查看完整代码，请参阅完整教程Create CSS3 Tooltip

Answer 3

对我来说，原因是我的父div的属性为“指针事件：无”。删除此问题后，我的工具提示没有显示子div的问题。

工具提示框没有显示使用CSS

3 个答案: