Всем привет!
Уже достаточно давно появилась новая мода: делать на CSS всё, где можно обойтись без использования JS. И в этом есть смысл.
В этой статье вы узнаете про подсказки на CSS, без использования тегов span внутри чуть ли не каждого блока.
Использовать мы будем псевдоэлемент after.
Блок, на котором будут проводиться все эти "эксперименты". Код будет приведён без всяких украшательств.

<style>
.block {
    position: relative;
    width: 100px;
    height: 25px;
}
</style>
<div class="block" text-help="Это блок">
	Блок
</div>

Появление подсказки при наведении на блок:

.block::after {
    content: attr(text-help);
    position: absolute;
    left:50%;
    background: #000;
    color: #fff;
    min-width: 50px;
    display: none;
    top:100%;
    margin-top:5px;
    transform: translateX(-50%);
}
.block:hover::after {
  display: block;
}