CSS基础应用学习系列(2)——纯CSS工具提示

工具提示是当鼠标停留在具有title属性的元素上时一些浏览器弹出的小文本框。一些开发人员结合使用Javascript和CSS创建了样式独特的工具提示。但是，通过使用CSS定位技术，可以创建纯CSS工具提示。这种技术需要符合标准的现代浏览器(比如Firefox)才能正确地工作。因此，它不是日常使用的技术。但是，它演示了高级CSS的能力，让你能够体会一下当CSS得到更好的支持之后会是什么情况。

首先需要创建结构良好且有意义的(X)HTML：
<p><a href="http://leepy.cnblogs.com/" class="tooltip">Leepy<span> 姓名：李平<br>网名：Leepy </span></a> 是一名Web程序员.</p>

这个链接设置类名为tooltip，以便从其他链接中区分出来。在这个链接中，添加希望显示为链接文本的文本，然后是包围在span中的工具提示文本。我江工具提示包围在span中。

首先需要做的是江锚的position属性设置为relative。这样就可以相对于父元素的位置对span的内容进行绝对定位。不希望工具提示在最初就显示出来，所以应该将它的display属性设置为none:
a.tooltip {
  position: relative;
}

a.tooltip span {
  display: none;
}

当鼠标停留在这个锚上时，希望显示span的内容。方法是将span的display属性设置为block，但是只在鼠标停留在这个链接上时这样做。如果现在测试此代码，当鼠标停留在这个链接上时，链接的旁边会出现span文本。
为了让span的内容出现在锚的右下方，需要将span的position属性设置为absolute，并且将它定位到距离锚顶部1em，距离左边2em。
a.tooltip:hover span {
  display:block;
  position:absolute;
  top:1em;
  left:2em;
}

这就是这种技术的主题部分。余下的工作是添加一些样式让span看起来像工具提示。可以给span家一些填充、一个边框和背景颜色：
a.tooltip:hover span {
  display:block;
  position:absolute;
  top:1em;
  left:2em;
  padding: 0.2em 0.6em;
  border:1px solid #ff0000;
  background-color:#FFFF66;
  color:#000;
  width:120px;
}

在firefox浏览器运行效果为下：