Sorry, I did confuse a title tag with a title attribute. I never really had a formal CSS training. Just learned a bunch of things by trial and error.
I've found something that seems to be working. I will just post it here if others happen to be asking the same question.
HTML:
<a href="#" class="tip" tooltip="This is the CSS tooltip">Link</a>
CSS:
a.tip {
color: #900;
text-decoration: none;
}
a.tip:hover {
color: red;
position: relative;
}
a.tip:hover:after {
content: attr(tooltip);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}