Метод 1: всплывающая подсказка CSS
Всплывающие подсказки CSS — популярный метод отображения дополнительной информации при наведении курсора мыши. Вот пример:

HTML:

<div class="tooltip">
  Hover over me
  <span class="tooltip-text">Additional information</span>
</div>

CSS:

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
}
.tooltip:hover .tooltip-text {
  visibility: visible;
}

Метод 2: библиотека подсказок JavaScript (например, Tippy.js)
Если вы предпочитаете более многофункциональное решение для подсказок, вы можете использовать библиотеку подсказок JavaScript, например Tippy.js. Вот пример:

HTML:

<button class="tooltip" data-tippy-content="Additional information">Hover over me</button>

JavaScript:

tippy('.tooltip');

Метод 3: всплывающая подсказка Bootstrap
Если вы используете платформу Bootstrap, вы можете использовать ее встроенный компонент всплывающей подсказки. Вот пример:

HTML:

<button class="btn btn-primary" data-toggle="tooltip" title="Additional information">Hover over me</button>

JavaScript:

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

Метод 4: jQuery Hover
Если вы уже используете jQuery в своем проекте, вы можете использовать его функцию hover() для отображения текста при наведении курсора. Вот пример:

HTML:

<div class="hoverable">
  Hover over me
  <div class="hover-text">Additional information</div>
</div>

JavaScript:

$(document).ready(function(){
    $(".hoverable").hover(
        function(){
            $(this).find(".hover-text").fadeIn();
        },
        function(){
            $(this).find(".hover-text").fadeOut();
        }
    );
});