tooltip.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TOOLTIPS</title>
	</head>

	<style type="text/css">
		.tooltip {
			color: white;
			position: relative;
			display: inline-block;
			border-bottom: 1px dotted black;
		}
		.tooltip .tooltiptext {
			visibility: hidden;
			width: 300px;
			background-image: url('https://i.imgur.com/3zHHKpo.png');
			color:  white;
			text-align: center;
			border-radius: 6px;
			padding: 15px 0;
			position: absolute;
			z-index: 1;
			botton: 150%;
			left: 50%;
			margin-left: -60px;
		}
		.tooltip .tooltiptext::after{
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: black transparent transparent transparent;

		}

		.tooltip:hover .tooltiptext{
			visibility: visible;
		}
	</style>


	<body style="text-align: center;background-image: url(https://i.imgur.com/UEQyAj9.jpg);">
		<div class="tooltip">
			<span class="tooltiptext">This is the <b>content-description</b></span>
			<b>Description</b>
		</div>

	</body>
</html>