JSFiddle - React, Tailwind, and code Playground

HTML

<strong style="font: 18px Arial, Helvetica, sans-serif; font-weight:bold" >Hover the Image</strong>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<table>
    <tr>
        <td>
            <div class="wrapper">  
                <img src="1.png"></img>
                <div class="tooltip"><span>1. A small tooltip.</span></div>
            </div>
        </td>
    </tr>
</table>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<table>
    <tr>
        <td>
            <div class="wrapper">  
                <img src="1.png"></img>
                <div class="tooltip"><span>2. Big Tip. Lorem Ipsum is simply dummy text of the printing Lorem Ipsum is simply dummy text of the printing.Lorem Ipsum is simply dummy text of the printing Lorem Ipsum is simply dummy text of the printing.Lorem Ipsum is simply dummy text of the printing Lorem Ipsum is simply dummy text of the printing.</span></div>
            </div>
        </td>
    </tr>
</table>

CSS

.wrapper {
    position: relative;
}
.tooltip{
    position: absolute;
    left: 0;
    z-index: 1;
    display:none;
    width: 500px; /*this is max width. It's invisible */
}
.tooltip span {
    background: #ffffe1;
    border-radius: 4px;
    border: 1px solid #DCA;
    box-shadow: 5px 5px 8px #ccc;
    bottom: 33px;
    color: #000;
    content: attr(title);
    display: block;
    left: 3px;
    padding: 14px;
    position: absolute;
    z-index: 98;
    font: 12px Arial, Helvetica, sans-serif;
    line-height: 16px;
    display:block;  
}
.tooltip span:before,
.tooltip span:after{
    position: absolute;
    content: "";
    border: solid;
}
.tooltip span:before {
	border-color: rgba(255, 255, 225, 1) transparent;
	border-width: 14px 16px 0px 0px;
	bottom: -11px;
	display: block;
	left: 15px;
	z-index: 1;
}
.tooltip span:after {
	border-color: #DCA transparent;
	border-width: 13px 15px 0px 0px;
	display: block;
	left: 14px;
	bottom: -13px;
	z-index: -1;
}
.wrapper:hover > .tooltip {
    display:block;
}