Всплывающие подсказки title на CSS

Рассмотрим возможность создания простых всплываек при наведении мыши на картинку или какой-нибудь html блок. При этом во всплывайки мы сможем добавлять только текст (ссылки и теги не вставить).

Как известно, html имеет “всплывайки-подсказки” по умолчанию – это title. Его можно вставить на любой тег, ссылку или кнопку: <div title=”подсказка при наведении на блок”>Читать</div>. Но у title есть существенный минус – он задан со стандартным оформлением, изменить который можно только с помощью скриптов. И второе, – title имеет задержку перед появлением.

Это бывает крайне не удобно, когда пользователь наводит на что-то мышь и ему приходится ждать появление подсказки. Часто он просто не догадывается о том, что там должно что-то появиться, быстро отводит мышь и подсказка вовсе не появляется.

Воспользуемся псевдоэлементом after, чтобы создать моментальные подсказки по аналогии с title, которые лишены этих недостатков. Сначала добавим сами элементы:

<div class=”all_photo”>
<div class=”item” data-text=”Осень”><img src=”726.jpg”></div>
<div class=”item” data-text=”Космос”><img src=”727.jpg”></div>
<div class=”item” data-text=”Подсказка”>Простой текст, на нем тоже может быть подсказка</div>
</div>

Обратите внимание – вместо title я использую выдуманный атрибут data-text, в нем и будет содержаться текст наших подсказок.

Теперь добавим css стиль, который заставит магическим образом красиво появляться подсказкам над картинками и обычным текстом в данном случае:

Здесь при наведении на .item “создается” псевдоблок after, в котором в качестве контента берется значение атрибута data-text. С помощью position: absolute; и z-index: 1; мы позиционируем подсказку сверху картинок.

Сейчас подсказка показывается снизу картинки. Чтобы она была строго посередине, измените класс так: .item

.item:hover::after {
content: attr(data-text);
position: absolute;
left: 50%;
width: 160px;
margin-left: -90px;
top: 50%;
margin-top: -30px;
height: 40px;
z-index: 1;
background: rgba(222, 222, 222, 0.82);
font-family: Arial;
font-size: 14px;
padding: 10px 10px;
color: #000;
}

Таким образом, достаточно просто сделать эффектные подсказки по аналогии с title не прибегая к использованию скриптов.