如何使HTML + CSS工具提示出现在顶部（避免剪辑）？ [英] How to make HTML+CSS tooltip appear on top (avoid clip)?

问题描述

我想使用HTML + CSS创建一个简单的工具提示。这是我有的：

I am trying to create a simple tooltip using just HTML+CSS. Here is what I have:

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

不幸的是，工具提示被剪辑。如何使其显示在所有内容之上？

Unfortunately, the tooltip gets clipped. How to make it appear on top of everything?

http：/ /jsfiddle.net/z9seu/

它被剪辑在这个jsfiddle中，在我的情况下，在一个表中的div任何，并被剪裁也。

It gets clipped in this jsfiddle, in my case that is in a table in a div whatever, and gets clipped also.

谢谢！

推荐答案

p>

The issue is with your

left: -10em;

如果删除该行（或使其为正值），文本的完整长度。

If you remove that line (or make it a positive value), the full length of your text appears.

由于你是绝对的，它会把它移出屏幕。

Since you are making it absolute, it moves it out of the screen.

这篇关于如何使HTML + CSS工具提示出现在顶部（避免剪辑）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！