Question

我正在尝试在css中使用工具提示，它正在工作，但是当工具提示出现时我遇到了问题，因为p标记中的文本显示在我要显示的范围内容“工具提示”上所有内容。我一直在尝试使用z-index，同时也定义了标签中的位置，但是无法理解为什么它不起作用。我想知道如何解决它的任何提示。

我有下一个html结构

 <div>
        <a class="tooltip">
            <p>Test1</p>
            <span>saassa</span>
        </a>
    </div>

CSS：

a.tooltip {
    outline: none;
    text-decoration: none;
    border-bottom: dotted 1px blue;
    display: inline;
    position: relative;
    padding: 0;
    background: none repeat scroll 0 0 #bcd9db;
    z-index: 20;
}

a.tooltip p {
    margin-bottom: 0px;
    display: inline;
    color: #006565;
    position: relative;
    z-index: 20;
}

a.tooltip > span {
    width: 25em;
    padding: 10px 20px;
    margin-top: 20px;
    margin-left: -85px;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    position: absolute;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    color: #000000;
    background: #FBF5E6;
    border: 2px solid #CFB57C;
    z-index: 1000;
}

a.tooltip:hover > span {
    opacity: 1;
    text-decoration: none;
    visibility: visible;
    overflow: visible;
    margin-top: 50px;
    display: inline;
    margin-left: -260px;
    background: #fbf5e6;
    position: absolute;
    z-index: 100000;
}

我已经加载到Fiddle，所以你可以看到它，只是悬停在三个第一个链接中的任何一个，你会看到无法看到div的所有内容。 http://jsfiddle.net/mtzcq/3/

非常感谢

Answer 1

从z-index和a.tooltip移除a.tooltip p。

http://jsfiddle.net/mtzcq/7/

这适用于我在Firefox for Mac

Answer 2

Enelcódigohtmltienes que quitar dentro del span los H6

Answer 3

删除“Z-index”的所有实例，但a.tooltip＆gt;中的实例除外。跨度

z-index和工具提示

3 个答案: