CSS3 Всплывающие подсказки
Создать всплывающие подсказки с CSS3.
Демо: Примеры подсказок
Всплывающая подсказка часто используется для указания дополнительной информации о чем-либо, когда пользователь перемещает указатель мыши над элементом:
Основы подсказок
Создание всплывающей подсказки, которая появляется при наведении курсора мыши на элемент:
Пример
<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".
CSS3: Использует классы tooltip, position:relative,
что необходимо для размещения текста всплывающей подсказки (position:absolute).
Примечание: Смотрите примеры ниже, сделать подсказки.
Класс tooltiptext содержит фактический текст подсказки. Если
по умолчанию скрыта, и будет видна при наведении (см. ниже). Мы также добавили
некоторые основные стили к нему: 120 писелей ширина, черный цвет фона, белый цвет текста,
центрированный текст и 5 писелей верхнее и нижнее заполнение.
CSS свойство border-radius используется для добавления закругленных углов в всплывающей подсказки текста.
Селектор :hover используется для отображения текста всплывающей подсказки при перемещении
наведите курсор на <div> с class="tooltip".
Расположение подсказок
В этом примере подсказка расположена справа (left:105%) от "наведением курсора"
текста (<div>). Также обратите внимание, что top:-5px
используется для размещения текста в середине элемента контейнера.
Мы используем число 5, так как текст всплывающей подсказки отступ снизу 5 пикселей.
При увеличении его заполнения также увеличьте значение свойства 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;
}
Попробуйте сами »