Question

I have a problem with my tooltips.

1. Tooltips can’t show
2. I want to set z-index tooltip front of table and div

Here is my demo in JSFiddle:
http://jsfiddle.net/WcjBh/

Someone can give idea ?
Thanks for help.

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

You have given your bottom and right wrong values. They should be:

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

Demo: http://jsfiddle.net/WcjBh/4/