tooltip data to show on right top of tooltip icon

Question

I have a requirement where i have multiple tables in a page and when i mouse over on one column it has to show tooltip at the top position with some data in it. Issue is tooltip is showing on the top of the page but at some random position. Please suggest. Thanks in advance.

Answer 1

Try to change CSS to:

a.tooltip:hover span {
    position: absolute;
    bottom: 10px;
    display: block;
    width: 240px;
    color: white;
    border: 0px solid black;
    padding: 5px;
}

See updated jsFiddle -> http://jsfiddle.net/Afa3f/3/