html - 工具提示无法显示

Question

我的工具提示有问题。

1. 工具提示无法显示
2. 我想在表格和 div 前面设置 z-index 工具提示

这是我在 JSFiddle 中的演示：http: //jsfiddle.net/WcjBh/

有人可以给出想法吗？感谢帮助。

a.tooltip
{
position: relative;
display: inline-block;
}

a.tooltip span
{
position: absolute;
width: 100px;
padding: 0px;
right: 50%;
font-size: 10px;
line-height: 16px;

text-align: center;
visibility: hidden;
bottom: 40px;


opacity: 0;

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

a.tooltip span:after
{
content: '';
position: absolute;
bottom: -14px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}

a:hover.tooltip span
{
opacity: 1;
visibility: visible;
bottom: 30px;
z-index: 100;
}

a.ttblue span
{
background: #488AC7;
border: 4px solid #488AC7;
color: #FFF;
}

a.ttblue span:after
{
border-top: 10px solid #488AC7;
}

html

<div class="content">
<table>
    <td><a href="" class="tooltip ttblue">David<span>My Name is David</span></a></td>
</table>
</div>

Answer 1

您给出了bottom错误的right价值观。他们应该是：

bottom: 0px;
right: auto;
left: -100%;

演示：http: //jsfiddle.net/WcjBh/4/