Artemyi,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bottom-text {
cursor: pointer;
text-align: center;
}
.txt {
display: none;
border: 1px solid #000;
width: 300px;
padding: 5px;
position: absolute;
background: white;
}
.bottom-text:hover+p+.txt {
display: block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$(".bottom-text").mousemove(function(e) {
$(this).nextAll(".txt").css({
"left": e.pageX - 305 + "px",
"top": e.pageY + 25 + "px"
});
})
});
</script>
</head>
<body>
<p class="bottom-text">Подсказка №1 ?</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ... </p>
<p class="txt">1 Текст подсказки который необходимо показать при наведение на знак вопроса</p>
<p class="bottom-text">Подсказка №2 ?</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ... </p>
<p class="txt">2 Текст подсказки который необходимо показать при наведение на знак вопроса</p>
</body>
</html>