Про подсказку через атрибут title выше уже написала.
Для подсказки, которая показана на скрине, в стилевом файле прописала правила:
.helpme{width:16px;height:16px;display:inline-block;background-image:url(путь к картинке help.svg);cursor:help; position:relative;left:-8px;top:-8px;}
.helpme:hover::after { content: attr(data-help);
width: max-content;
max-width: 20em;
position: absolute;
left: -50px; bottom: 20px; /* Положение подсказки */
z-index: 1; /* Отображаем подсказку поверх других элементов */
background: rgba(235,235,235,0.9); /* Полупрозрачный цвет фона */
color: #444;
text-align: center;
font-size: 90%;
padding: 5px 10px;
border: 1px solid rgba(128,128,128,0.8);
border-radius:4px;
}
.helpme:hover::before { /* треугольничек под подсказкой */
content:"";
position: absolute;
left: -30px; bottom: 5px; /* Положение треугольника */
border: 5px solid transparent;
border-top: 10px solid rgba(128,128,128,0.8);
}
Там, где нужно вставить подсказку, добавляю пустой тег span с классом helpme и атрибутом data-help="текст подсказки". Стили установлены так, что чуть левее и выше расположения этого span появляется кружочек с вопросиком, при наведении на который всплывает подсказка.
Хотите, чтобы подсказка появлялась при наведении на текст? Окружите этот текст тегом span с указанными атрибутами и исправьте стили для класса .helpme