Вы можете достичь этого с помощью CSS, установив атрибут данных с «парящим текстом» в HTML для каждой кнопки. Если слишком много кнопок, чтобы сделать это вручную, или если они динамически меняются, вы можете зациклить их в JS и использовать .setAttribute("data-tip", "tip_content")
.
Вот пример HMTL и CSS:
<button data-tip="Show this on hover">My botton</button>
button:hover:after {
content: attr(data-tip);
color: red;
display: block;
position: absolute;
top: 20%;
}
Вот ссылка на кодовый блок, если вы хотите увидеть ее вживую: https://codepen.io/CPC464/pen/KEbJJo