HTML5:
Tooltip Above Text:
<a tooltip=”This is how your tooltip will show.” class=”tooltip-above”> When you Hover This text, you will see a tooltip </a>
Tooltip BelowText:
<a tooltip=”This is how your tooltip will show.” class=”tooltip-below”> When you Hover This text, you will see a tooltip </a>
Note: We usually use Title for tooltips, but I decided to create my own HTML5 attribute tag so avoid having browser showing two tooltips which is WRONG, mine and the default grey tooltip by the browser as shown below:
CSS3:
Tooltip Above Text:
<style>
.tooltip-above{
display: inline;
position: relative;
width: auto;
font-family: Arial, Calibri;
}
.tooltip-above:hover:after{
background: #333;
background: rgba(0,0,0,.8);
top: -53px;
color: #fff;
content: attr(tooltip);
left: 0;
padding: 5px 10px;
position: absolute;
z-index: 98;
min-width: 250px;
min-height: 30px;
}
.tooltip-above:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0px 6px;
top: -5px;
content: “”;
left: 50%;
position: absolute;
z-index: 99;
}
</style>
Tooltip Below Text:
<style>
.tooltip-below{
display: inline;
position: relative;
width: auto;
font-family: Arial, Calibri;
}
.tooltip-below:hover:after{
background: #333;
background: rgba(0,0,0,.8);
top: 26px;
color: #fff;
content: attr(tooltip);
left: 0;
padding: 5px 10px;
position: absolute;
z-index: 98;
min-width: 250px;
min-height: 30px;
}
.tooltip-below:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 0px 6px 6px 6px;
top: 20px;
content: “”;
left: 50%;
position: absolute;
z-index: 99;
}
</style>
Rochcass 
I’m baffled by the little triangle on the displayed tooltip. How does CSS do that?
yes thats the magic with CSS3. Basically what is happening you set the borders to either a solid color or to transparent to at least 3 slides of the rectangle/square. Wherever has a solid color as border will be showing.
For instance:
border-bottom: 10px solid black;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
Which will give u a normal trangle