html - 如何使 HTML+CSS 工具提示出现在顶部(避免剪辑)？

Question

我正在尝试仅使用 HTML+CSS 创建一个简单的工具提示。这是我所拥有的:

HTML:

<div>
    <span>some text</span>
    <span id="tooltip">some (1) longer (2) text (3)...</span>
</div>

CSS:

div {
    position: relative;
    background-color: lightgreen;
}

span#tooltip {
    display: none;
    position: absolute;
    left: -10em;
    background-color: yellow;
    z-index: 1000;
}

div:hover span#tooltip {
    display: block;
}

不幸的是，工具提示被剪掉了。如何让它出现在一切之上？

http://jsfiddle.net/z9seu/

它在这个 jsfiddle 中被剪掉了，在我的例子中是在 div 中的一个表中，并且也被剪掉了。

谢谢!

Answer 1

问题出在你的

left: -10em;

如果您删除该行(或将其设为正值)，则会显示文本的全长。

由于您将其设为绝对，因此它会将其移出屏幕。