How to positioning the tooltip above cursor

Question

I'm implementing a tooltip css only in my new website project.

But how can I set the tooltip to show up above the cursor?

The CSS that I have:

a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none; cursor: help;} 
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:220px; line-height:17px;
}

a.tooltip:hover span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}

/*CSS3 extras*/
a.tooltip span
{
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    -moz-box-shadow: 1px 1px 8px #CCC;
    -webkit-box-shadow: 1px 1px 8px #CCC;
    box-shadow: 1px 1px 8px #CCC;
}

This is the html:

<a href="#" class="tooltip">Normal Text<span><strong>Tooltip title</strong><br />This would be the content of the tooltip that I want to show up above the cursor.</span></a>

Thanks for help me out guys!

Regards, Dylan

Answer 1

First set position of the anchor tag to relative to set that as a reference point for absolute positioned children.

Then use the following CSS declaration:

a.tooltip span {
    z-index:10;
    display:none;
    padding:14px 20px;
    width:220px;
    line-height:17px;
}

a.tooltip:hover span {
  display:block;
  position:absolute;
  bottom: 2em;       /* Use a relative unit to increase the capability */
  left: 0;
  color:#373535;
  border:2px solid #D3D3D3;
  background:#fffFff;
}

JSBin Demo

Update

If you want to display the tooltip box at top center, set the left property to 50% then transform: translateX(-50%):

a.tooltip:hover span {
  /* ... */
  left: 50%;
  -webkit-transform: translateX(-50%);
}

Updated Demo