Рассмотрим возможность создания простых всплываек при наведении мыши на картинку или какой-нибудь 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 стиль, который заставит магическим образом красиво появляться подсказкам над картинками и обычным текстом в данном случае:
<style>
.item {position: relative;width: 200px; height: 200px; overflow: hidden; text-align: center; display: inline-block;}
.item:hover::after {
content: attr(data-text);
position: absolute;
left: 0%;
right: 0%;
bottom: 0%;
z-index: 1;
background: rgba(47, 47, 47, 0.9);
font-family: Arial;
font-size: 14px;
padding: 15px 10px;
color: #fff;
}
</style>
Здесь при наведении на .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 не прибегая к использованию скриптов.
