Тултип (tooltip) является дополнительным источником информации, используемом в пояснительных целях. С помощью всплывающей подсказки можно расшифровывать аббревиатуры, давать определения понятиям, а также применять описания к картинкам.
Ниже представлен пример реализации простого тултипа без использования каких-либо скриптов, только HTML и CSS.
HTML разметка
<span class="tooltiptext" data-tooltip="Всплывающая подсказка">Тултип</span>
CSS стили
.tooltiptext {border-bottom:1px dotted #118EC7; cursor:help}
.tooltiptext::after {
background:#343434;
z-index: 9999;
box-shadow:1px 1px 10px rgba(0,0,0,0.5);
color:#FFF;
content:attr(data-tooltip); /* Определяет содержимое всплывающей подсказки */
margin-top:-24px;
opacity:0;
padding:3px 7px;
position:absolute;
visibility:hidden;
transition:all .2s ease-in-out; /* Определяет скорость появления подсказки */
}
.tooltiptext:hover::after {opacity:1; visibility:visible}
Комментарии