CSS实例教程:纯CSS 工具提示

Tooltips are the little yellow text boxes that pop up in some browsers when you hover over elements with title tags. Several developers have created their own custom, stylized tooltips using a combination of JavaScript and CSS. However, it is possible to create pure CSS tooltips by using CSS positioning techniques. This technique requires a modern, standardscompliant browser like Firefox to work properly. As such, it is not a technique you would add to your day-to-day arsenal. However, it does demonstrate the power of advanced CSS and gives you a hint of what will be possible when CSS is better supported.
工具提示是当鼠标停留在具有tltle 属性的元素上时一些浏览器弹出的黄色小文本框。一些开发人员结合使用JavascriPt 和CSS 创建了样式独特的工具提示。但是，通过使用CSS 定位技术，可以创建纯CSS 工具提示。这种技术需要符合标准的现代浏览器（比如Flrefox ）才能正确地工作。因此，它不是日常使用的技术。但是，它演示了高级Css 的能力，让你能够体会一下当CSS 得到更好的支持之后会是什么情况。
As with all of the examples in this book, you need to start with well-structured and meaningful
(X)HTML:
与本书中的所有示例一样，需要先创建结构良好且有意义的（x ) HTML :
<p>
<a href="http://www.isstudy.com/" class="tooltip">Andy Budd<span> (This website rocks) </span></a>
is a web developer based in Brighton England.
</p>
I have given the link a class of tooltip to differentiate it from other links. Inside the link I have added the text I wish to display as the link text, followed by the tooltip text enclosed in a span. I have wrapped my tooltip text in brackets so that the sentence still makes sense with styles turned off.
这个链接设置类名为tooltip ，以便从其他链接中区分出来。在这个链接中，添加希望显示为链接文本的文本，然后是包围在span 中的工具提示文本。我将工具提示包围在圆括号中，这样的话在样式关闭时这个句子仍然是有意义的。
The first thing you need to do is set the position property of the anchor to relative. This allows you to position the contents of the span absolutely, relative to the position of its parent anchor. You do not want the tooltip text to display initially, so you should set its display property to none:
首先需要做的是将锚的position 属性设置为relative 。这样就可以相对于父元素的位置对sPan 的内容进行绝对定位。不希望工具提示在最初就显示出来，所以应该将它的disPlay 属性设置为none :
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
When the anchor is hovered over, you want the contents of the span to appear. This is done by setting the display property of the span to block, but only when the link is hovered over. If you were to test the code now, hovering over the link would simply make the span text appear next to the link.
当鼠标停留在这个锚上时，希望显示sPan 的内容。方法是将span 的dj splay 属性设置为block ，但是只在鼠标停留在这个链接上时这样做。如果现在测试此代码，当鼠标停留在这个链接上时，链接的旁边会出现sPan 文本。
To position the contents of the span below and to the right of the anchor, you need to set the position property of the span to absolute and position it 1em from the top of the anchor and 2ems from the left.
为了让span 的内容出现在锚的右下方，需要将sPan 的positlon 属性设置为abs01ute ，并且将它定位到距离锚顶部lem ，距离左边Zem 。
Remember, an absolutely positioned element is positioned in relation to its nearest positioned ancestor, or failing that, the root element. In this example, we have positioned the anchor, so the span is positioned in relation to that.
请记住，绝对定位元素的定位相对于最近的已定位祖先元素（如果没有，就相对于根元素）。在这个示例中，已经定位了锚，所以sPan 相对于描进行定位．
a.tooltip:hover span {
display: block;
position: absolute;
top: 1em;
left: 2em;
}
And that’s the bulk of the technique. All that is left is to add some styling to make the span look more like a tooltip. You can do this by giving the span some padding, a border, and a background color:
这就是这种技术的主体部分。余下的工作是添加一些样式让span 看起来像工具提示。可以给sPan 加一些填充、一个边框和背景颜色：
a.tooltip:hover span {
display:block;
position:absolute;
top:1em;
left:2em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;