Использование всплывающих подсказок на HTML страницах, прекрасная возможность дать пользователю уточняющую информацию, в удобном для него виде - прямо здесь и сейчас. Не заставляя его переходить по ссылкам или ещё того хуже, в другое место сайта.
Использование всплывающих подсказок на HTML страницах, прекрасная возможность дать пользователю уточняющую информацию, в удобном для него виде - прямо здесь и сейчас. Не заставляя его переходить по ссылкам или ещё того хуже, в другое место сайта.
На этом уроке, мы реализуем всплывающую подсказку на чистом CSS при наведении на фрагмент выделенного текста или ссылку. Начнем с того, что мысленно прокрутим у себя последовательность действий.
- Создадим параграф с текстом
- Пропишем ссылку внутри текста
- Внутри тега a вставим атрибут aria-label с текстом подсказки
- Стилизуем псевдоэлемент after как контейнер для текста всплывающей подсказки
- Сделаем при помощи before маленький треугольник
- Скроем псевдоэлемент на странице
- Покажем всплывающую подсказку при наведении на ссылку в тексте
HTML разметка
Атрибут aria-label вставляется в HTML разметку и используется, как метка для текста всплывающих подсказок. Пропишем в атрибуте текст, который будет находиться внутри всплывающей плашки.
<p>Tarwhine cow shark shortnose chimaera clingfish sleeper shark, trout-perch Alaska blackfish armored gurnard. Loosejaw wels catfish devil ray, dealfish neon tetra pencilsmelt spookfish glassfish southern Dolly Varden Siamese fighting fish; betta delta smelt Antarctic icefish. Lined sole cusk-eel coley midshipman dogteeth <a href="#" aria-label="This is extra information">tetra Moorish</a> idol ronquil halfmoon javelin. Arrowtooth eel triggerfish, sailfish red velvetfish red snapper speckled trout bass mosquitofish scissor-tail rasbora.</p>
Стили CSS
Зададим нашей метке относительную позицию, чтобы всплывающий блок можно было разместить относительно ссылки. Поменяем внешний вид курсора, чтобы при наведении на ссылку, к иконке курсора добавился вопросительный знак.
/* текст в контейнере */
[aria-label] {
position: relative;
cursor: help;
}
Опишем свойства для псевдоэлемента after, изображающего блок для текста всплывающей подсказки. Изначально, блок с подсказкой должен быть невидимым display: none. Значение свойства white-space: nowrap не учитывает пробелы и переносы в HTML коде, это гарантирует отображение подсказки в одну строку.
/* всплывающий контейнер */
[aria-label]:after {
content: attr(aria-label); /* атрибут метка */
display: none; /* скрываем контейнер */
position: absolute;
top: 110%; /* расстояние от ссылки от верхней границы */
left: 10px; /* смещение влево */
z-index: 2; /* блок поверх параграфа с текстом */
padding: 14px;
line-height: 15px; /* выравнивание подсказки по центру */
white-space: nowrap; /* не переносить на другую строку */
color: #fff; /* цвет подсказки */
background-color: #412917; /* цвет контейнера */
border-left: 8px solid #d37092; /* красная рамка слева */
border-radius: 5px; /* скругленные края блока */
}
Создадим маленький треугольник, указывающий на ссылку. Пристроим его к сверху блока и тоже спрячем.
/* треугольник у контейнера */
[aria-label]:before {
content: " ";
display: none;
top: 66%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
При наведении на ссылку, показать всплывающую подсказку.
[aria-label]:hover:after, [aria-label]:hover:before {
display: block;
}
