CSS Подсказка
Как создать всплывающие подсказки с помощью CSS?
Демо: Примеры подсказок
Подсказка часто используется для указания дополнительной информации о чем-либо, когда пользователь наводит указатель мыши на элемент:
Основная подсказка
Создайте всплывающую подсказку, которая появляется, когда пользователь наводит указатель мыши на элемент:
Пример
<style>
/* Контейнер подсказок */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* Если вы хотите точки под текстом при наведении мыши */
}
/* Текст подсказки
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Разместите текст всплывающей подсказки - см. Примеры ниже! */
position: absolute;
z-index: 1;
}
/* Показывать текст всплывающей подсказки при наведении указателя мыши на контейнер всплывающей подсказки */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Наведите на меня
<span class="tooltiptext">Текст подсказки</span>
</div>
Попробуйте сами »
Объяснение примера
HTML: Используйте элемент контейнера (например <div>) и добавьте в него класс "tooltip". Когда пользователь наведет курсор на этот <div>, он покажет текст всплывающей подсказки.
Текст всплывающей подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext".
CSS: Класс tooltip применяется position:relative, который необходим для позиционирования текста всплывающей подсказки (position:absolute).
Примечание: Ниже приведены примеры того, как расположить подсказку.
Класс tooltiptext содержит фактический текст всплывающей подсказки. По умолчанию он скрыт и будет виден при наведении (см. выше). Мы также добавили в него несколько основных стилей: ширину 120px, цвет черного фона, цвет белого текста, центрированный текст, верхний и нижний отступы 5px.
CSS свойство border-radius используется для добавления закругленных углов к тексту всплывающей подсказки.
Селектор :hover используется для отображения текста всплывающей подсказки, когда пользователь наводит указатель мыши на <div> с class="tooltip".
Позиционирование всплывающих подсказок
В этом примере всплывающая подсказка находится справа (left:105%) от "наведенного" текста (<div>). Также обратите внимание, что top:-5px используется для размещения его в середине элемента контейнера. Мы используем число 5, потому что текст всплывающей подсказки имеет верхний и нижний отступы 5px. Если вы увеличите его отступ, также увеличьте значение свойства top, чтобы оно оставалось посередине (если это то, что вам нужно). То же самое необходимо, если вы хотите, чтобы подсказка была расположена слева.
Подсказка справа
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Результат:
Подсказка слева
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Результат:
Если вы хотите, чтобы всплывающая подсказка появлялась сверху или снизу, см. примеры ниже. Обратите внимание, что мы используем свойство margin-left со значением минус 60 пикселей. Это должно центрировать всплывающую подсказку выше / ниже текста, на который нужно навести текст. Устанавливается на половину ширины всплывающей подсказки (120/2 = 60).
Подсказка вверху
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Используйте половину ширины (120/2 = 60), чтобы центрировать подсказку */
}
Результат:
Подсказка внизу
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Используйте половину ширины (120/2 = 60), чтобы центрировать подсказку */
}
Результат:
Подсказка со стрелкой
Чтобы создать стрелку, которая должна появляться с определенной стороны всплывающей подсказки, добавьте "пустое" содержимое после всплывающей подсказки с классом псевдоэлемента ::after вместе со свойством content. Сама стрелка создана с использованием границ. Это сделает подсказку похожей на речевой пузырь.
Этот пример демонстрирует, как добавить стрелку внизу всплывающей подсказки:
Нижняя стрелка
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* В нижней части всплывающей подсказки */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Результат:
Объяснение примера
Поместите стрелку внутри подсказки: top: 100% поместит стрелку внизу всплывающей подсказки. left: 50% будет центрировать стрелку.
Примечание: Свойство border-width определяет размер стрелки. Если вы измените его, также измените значение margin-left на то же самое. Это будет располагать стрелку в центре.
Свойство border-color используется для преобразования содержимого в стрелку. Мы устанавливаем верхнюю границу черным, а остальное прозрачным. Если бы все стороны были черными, вы бы получили черный квадрат.
Этот пример демонстрирует, как добавить стрелку в верхнюю часть всплывающей подсказки. Обратите внимание, что на этот раз мы установили цвет нижней границы:
Верхняя стрелка
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* В верхней части всплывающей подсказки */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Результат:
Этот пример демонстрирует, как добавить стрелку слева от всплывающей подсказки:
Стрелка слева
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* Слева от всплывающей подсказки */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Результат:
Этот пример демонстрирует, как добавить стрелку справа от всплывающей подсказки:
Стрелка справа
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* Справа от всплывающей подсказки */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Результат:
Всплывающие подсказки (анимация)
Если вы хотите затемнить текст всплывающей подсказки, когда он собирается быть видимым, вы можете использовать свойство CSS transition вместе со свойством opacity, и оно становится от полностью невидимого до 100% видимым за указанное количество секунд (в нашем примере это 1 секунда):
Пример
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}
Попробуйте сами »
