JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
Текст текст текст <span class="span"><b>текст 1</b></span> <br>Текст текст текст
Текст текст текст <span class="span"><b>текст 2</b></span> <br>Текст текст текст
Текст текст текст <span class="span"><b>текст 3</b></span> <br>Текст текст текст
Текст текст текст <span class="span"><b>текст 4</b></span> <br>Текст текст текст
Текст текст текс т<span class="span"><b>текст 5</b></span> Текст текст текст
  
</body>
</html>

CSS

body {
			background-color: #cecece;
		}
		.tooltip-window {
			display: none;
			position: absolute;
			display: flex;
			justify-content: center;
			width: 150px;
			max-width:100%;
			padding: 20px 10px;
			background-color: #ffffff;
			box-shadow: 1px 1px 35px #8e8989;
		}
		.tooltip-window:before {
			content:"";
			position: absolute;
			left: 50%;
			top: -20px;
			transform: translateX(-50%);
			border: 10px solid transparent; 
			border-bottom: 10px solid #fff;
		}
		.tooltip-window__button {
			padding: 10px 20px;
			color: #3b3e5e;
			font-weight: 700;
			background-color: yellow;
			border-radius: 7px;
			text-decoration: none;
		}

JavaScript

$(document).ready(function () {
			var temp = 
			'<div class="tooltip-window">'+
				'<a href="#" class="tooltip-window__button">Узнать цены</a>'+
			'</div>';

			$('.span').on('mouseenter', function() {
				$("body").append(temp);
				$(".tooltip-window").show();

				var coord_left = $(this).offset().left;
				var coord_top = $(this).offset().top;
				var height = $(this).outerHeight();

				$(".tooltip-window").offset({top:coord_top + height + 10, left:coord_left});
			});

			$('.span').on('mouseleave', function() {
				$(".tooltip-window").remove();
			});
			 

			
		});