JSFiddle - React, Tailwind, and code Playground

HTML

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



<div><a href="#" class="tooltip"><img src="1.png"><span>
  <p>Lorem Ipsum is simply text</p>
  </span></a></div><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div><a href="#" class="tooltip"><img src="1.png"><span>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </span></a></div>
<br>
<br>
<br>

CSS

.tooltip {
	display: inline;
	position: relative;
}
.tooltip:hover {
	color: #000;
	text-decoration: none;
}
.tooltip img {
	padding: 20px 10px 0px 10px;
}
.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: 0px 14px 1px 14px;
	position: absolute;
	z-index: 98;
	min-width: 300px;
	max-width: 500px;
	font: 12px Arial, Helvetica, sans-serif;
	line-height: 16px;
	display: none;
}
.tooltip span:before {
	border: solid;
	border-color: rgba(255, 255, 225, 1) transparent;
	border-width: 14px 16px 0px 0px;
	bottom: -11px;
	content: "";
	display: block;
	left: 15px;
	position: absolute;
	z-index: 1;
}
.tooltip span:after {
	border: solid;
	border-color: #DCA transparent;
	border-width: 13px 15px 0px 0px;
	content: "";
	display: block;
	left: 14px;
	bottom: -13px;
	position: absolute;
	z-index: -1;
}
.tooltip:hover span {
	display: block;
}