html - 在所有内容之上显示 CSS 内容

Question

我找到了一个非常简单的 CSS 示例，用于使用 content 设置创建自定义工具提示，它的演示看起来很棒。我采用样式并将其实现到我自己的页面中，但是我很快注意到工具提示似乎使用最小宽度作为宽度，并且显示在其他所有内容的下方。

我已经尝试了几十种变体，但到目前为止没有任何方法可以解决这个问题。任何人都可以深入了解如何解决这个问题吗？

span[data-tooltip]
{
    position: relative;
    cursor: help;
}
span[data-tooltip]:hover:after
{
    content: attr(data-tooltip);
    display: inline-block;
    position: absolute;
    top: 1em;
    right: -200%;
    background: rgba(240,240,240,1.0);
    border: 1px solid rgba(0,0,0,1.0);
    min-width: 10em;
    padding: 0.25em;
    text-shadow: none;
}

HTML:

<span data-tooltip='Tool Tip'><img src='http://www.economicmodeling.com/wp-content/uploads/Info-icon.jpg' width=12px height=12px></span>

Answer 1

使用z-index:

span[data-tooltip]:hover:after
{
    content: attr(data-tooltip);
    display: inline-block;
    position: absolute;
    top: 1em;
    right: -200%;
    background: rgba(240,240,240,1.0);
    border: 1px solid rgba(0,0,0,1.0);
    min-width: 10em;
    padding: 0.25em;
    text-shadow: none;
    z-index:99;
}

MDN Docs