Предыдущий урок был посвящен реализации простой всплывающей подсказки при наведении курсора на текст, созданной при помощи HTML и CSS. На его основе можно сделать всплывающую подсказку для изображения, которая будет выводиться снизу при наведении на неё.
Пример всплывающей подсказки для изображения
HTML разметка
/* Вместо # вставьте путь к изображению */ <div class="tooltipimg" data-tooltip="Подсказка"><img src="#"></div>
CSS стили
.tooltipimg { display:inline-block; position:relative;}
.tooltipimg:hover::after {
content:attr(data-tooltip); /* Определяет содержимое всплывающей подсказки */
position:absolute;
left:0; right:0; bottom:0px;
z-index:9999;
background:#343434;
color:#fff;
text-align:center;
padding:5px 10px;
}
Комментарии