tooltip

HTML

<table><tbody>
    <tr>
        <td title="Mouse over me o_O">I'm just td</td>
    </tr>
</tbody></table>
<div title="Thanks, man!">Hover me!</div>
asfasf

CSS

.tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 2;
    background-color: grey;
    border: 1px solid black;
    border-radius: 10px;
    padding: 10px;
    min-width: 200px;
}

JavaScript

window.addEventListener( "load", function( windowLoadE ) {
    var elements = document.body.querySelectorAll( "[title]" );
    for ( var i = 0; i < elements.length; i++ ) {
        elements[ i ].style.position = "relative";
        var tooltip = document.createElement( "div" );
        tooltip.setAttribute( "class", "tooltip" );
        tooltip.innerText = elements[ i ].getAttribute( "title" );
        elements[ i ].appendChild( tooltip );
        elements[ i ].addEventListener( "mouseenter", function( elMouseEneterE ) {
            var tooltip = this.querySelector( "div.tooltip" );
            tooltip.style.display = "inline";
        } );
        elements[ i ].addEventListener( "mouseleave", function( elMouseEneterE ) {
            var tooltip = this.querySelector( "div.tooltip" );
            tooltip.style.display = "none";
        } );
    }
} );