z索引和工具提示

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

我已经装满了小提琴，因此您可以看到它，只需在三个第一个链接中的任何一个中徘徊，您将看到无法看到Divs的所有内容。http://jsfiddle.net/mtzcq/3/

非常感谢

Answer 1

从a.tooltip和a.tooltip p中删除z-index。

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

在Firefox中为我工作的Mac

Answer 2

en el elcódigohtml tienes que quiat quitar dentro del span los H6

Answer 3

除了a.tooltip> span> span