JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<div class="ugly-container">
<div id='test' title='foo'>Test</div>
    
<table>
    <tr a="New Text">
        <td>q</td>
        <td>Testing tool-tip</td>
    </tr>
    <tr a="text">
        <td>q</td>
        <td>Testing tool-tip</td>
    </tr>
    <tr>
        <td>q</td>
        <td>Testing tool-tip</td>
    </tr>
    
</table>    
</div>

CSS

.tip {
    display: inline;
    position: relative;
}

.tip:hover {
    color: #c00;
    text-decoration: none;
}

.tip:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(data-title);
    display: block;
    left: 1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: pre;
    z-index: 98;
}

.tip:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}

/***************Just moving to right bottom******************/
div.ugly-container{
    margin-top:50px;
    margin-left:220px;
}

JavaScript

$('td:nth-child(2)').each(function(){
    $(this).attr('data-title',$(this).closest('tr').attr('a'));
    
    
    if($(this).attr('data-title') !=null && $(this).attr('data-title') !=''){
        $(this).addClass('tip');
    }
});


//$('td:nth-child(2)').addClass('tip').attr('data-title','just testing \nwith new lines //\nand more new lines');