Дата и время публикации:
1. Что это такое
Всплывающая подсказка удобное средство, чтобы снабдить кратким описанием посетителей на странице HTML, например указать, что делает та или иная ссылка с использованием атрибута "title" или элемента SPAN через каскадные таблицы CSS3, как иллюстрирует листинге 1.1.
Листинг 1.1
<a href="#" title="Инструкции для дальнейших действий" >ссылки с подсказкой</a>
2. Использование каскадных таблиц CSS3
2.1 Простота использования
Данный способ позволяет получить всплывающую подсказкуДа-Да – это всплывающая подсказка, вид которой можно привести в соответствие с дизайном страницы HTML. При этом её легко можно встраивать в текст предложения в виде контейнера – видимого читателю текст и скрытый, содержащий текст подсказки, как показано в листинге 2.1.
Листинг 2.1
<p>Данный способ позволяет получить <span class="tooltip">всплывающую подсказку <span class="tooltiptext">Да-Да – это всплывающая подсказка </span></span> . . . </p>
При этом, потребуется использовать два тега span и соответствующие классы каскадных таблиц:
2.2 Класс tooltip
Отвечает за оформление видимой части контейнера, как показано в листинге 2.2.1
Листинг 2.2.1
.tooltip {
position: relative; /* метод отображения текста – отн. места вставки */
display: inline-block; /* с возможностью обтекания окружающие его элементами */
border-bottom: 1px dotted #004655; /* c выделением подчеркиванием пунктирной линией и */
cursor: pointer; /* и изменением курсора на указатель при наведении "мышки" */
}
В тоже время, не на всех устройствах существует возможность наведения указателя. Особенно, если идет речь о речевых браузерах и синтезаторах или устройствах, основанных на системе Брайля, для пользователей с ограниченной функцией слуха, или о планшетах и смартфонах, в которых он просто отсутствует за ненадобностью. Поэтому для того рода устройств в классе tooltip делаем настройки курсора по-умолчанию при помощи запроса @media, как показано в листинге 2.2.2 .
Листинг 2.2.2
@media screen and (max-device-width: 1024px) {
.tooltip {pointer: default;} /* делаем курсор по умолчанию там, где */
/* его невозможно будет увидеть */
}
2.3 Класс tooltiptext
Как следует из листинга 2.3, данный класс "играет" только вместе с классом tooltip и придает форму и оформление всплывающей подсказки
Листинг 2.3
.tooltip .tooltiptext {
visibility: hidden; /* Снимаем видимость, пока не заиграет селектор */
width: auto; /* при наведении пользователем курсора. Разрешаем */
background-color: #004655; /* в динамике менять размер и устанавливаем цвет */
color: #E6FFFB; /* текста и фона. */
text-align: center; /* Выравниваем по центру текст всплывающей подсказки,*/
border-radius: 6px; /* округляем углы рамки, */
padding: 5px 0; /* Устанавливаем внутренний отступ текста от края */
position: absolute; /* рамки подсказки и позицианируемся от края контейнера */
z-index: 1; /* с отображением наложением вторым слоем */
bottom: 125%; /* Задаем в процентах, положение элемента отн. края родителя */
left: 50%; /* и центрируем его в следующих двух строчках. */
margin-left: -50%;
opacity: 0; /* устанавливаем начальную прозрачность и */
transition: opacity 2s; /* время затенения, которое установлено в селекторе */
-webkit-transition: opacity 5s; /* псевдокласса ":hover", а так же */
-moz-transition: opacity 5s; /* различные интерпретации для совместимости */
-o-transition: opacity 5s; /* c другими браузерами */
}
2.4 Псевдоклассы :hover и :after
Оба псевдоклассы позволяют "вызывать" подсказку в контейнер при наведении курсора (:hover) и придание ей формы после отображения (:after). Соответственно, их определение представлено в листингах 2.4.1 и 2.4.2
Листинг 2.4.1
/* Псевдокласс "играет" после отображения подсказки */
.tooltip .tooltiptext::after {
content: ""; /* За счет применения свойств позиционирования */
position: absolute; /* и вставки содержимого подсказке обретает */
top: 100%; /* красивую форму. */
left: 50%;
margin-left: -1%;
border-width: 5px;
border-style: solid;
border-color: #004655 transparent transparent transparent;
}
Листинг 2.4.2
/* Псевдокласс "играет" после отображения подсказки */
.tooltip .tooltiptext::after {
content: ""; /* За счет применения свойств позиционирования */
position: absolute; /* и вставки содержимого подсказке обретает */
top: 100%; /* красивую форму. */
left: 50%;
margin-left: -1%;
border-width: 5px;
border-style: solid;
border-color: #004655 transparent transparent transparent;
}
3. Библиография
1) How to Add a Tooltip in HTML
3) Tooltip with HTML content without JavaScript
4) Creating tooltips using the title attribute of HTML
5) Использование CSS переходов
7) transition