CSS tooltip: how to auto center over element? I'm following this guys code. I want the tooltip widthless like his example code. But his code doesn't center. Each tooltip will be different length of text. If I give it a width then centering is easy. But how to without? Thanks.

http://forrst.com/posts/Simple_pure_...with_arrow-BkY

The markup...

<a href="#" title="Sample tooltip" class="tooltip">Link</a>

.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}
.tooltip:hover:after{
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:18px;
color:#fff;
content:attr(title);
display:block;
left:50%;
padding:5px 15px;
position:absolute;
white-space:nowrap;
z-index:98
}
.tooltip:hover:before{
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:12px;
content:"";
display:block;
left:75%;
position:absolute;
z-index:99
}