Всплывающая подсказка - как сделать самому?

Всплывающие подсказки — html, JS, Bootstrap

Всплывающая подсказка представляет собой короткое текстовое сообщение с пояснением, возникающие в результате наведения курсора мышки на элемент страницы. Далее рассмотрим как сделать всплывающую подсказку в html.

Стандартный способ

За показ подсказки отвечает {title}. Этот атрибут можно использовать для показа подсказки к разным объектам, но чаще всего его используют в качестве поясняющего текста к изображениям.

Для показа всплывающей подсказки нужно только лишь добавить это атрибут и написать в нем необходимый поясняющий текст.

<img src = "pdskzk.jpg" title = "Это под">

В качестве подсказки может использоваться как одно слово или словосочетание, так и сразу несколько предложений. Обычно всплывающая html подсказка выглядит следующим образом:

Поясняющий текст появляется не сразу после наведения мышки на изображение, а через пару секунд. Такая особенность всплывающих подсказок заложена по умолчанию.

Стандартная всплывающая html подсказка при наведении на текст имеет один существенный недостаток – отсутствие инструментов для стилизации. Чтобы решить эту проблему необходимо использовать другие способы создания всплывающей подсказки.

Способ на чистом css

Для красивого вывода подсказки обычно используется именно этот способ. Он предусматривает заключение картинки в контейнер с идентификатором. Благодаря этому, обеспечивается возможность обращения к данному контейнеру в стилях:

<div id = "pdskzk" data-name = "Текст подсказки"><img src = "pdskzk.jpg"></div>

В вышеуказанном примере единственным непонятным моментом может быть . Этот атрибут не выполняет никакой функции. Однако его значение используется в js и css. Таким образом, и этот атрибут может быть полезен. Но сначала необходимо описать стили блок-контейнера.

Относительное позиционирование используется по причине того, что контейнер со всплывающей подсказкой будет позиционироваться абсолютно. Поэтому необходимо сделать так, чтобы текст позиционировался только относительно родительского блока, а не всей страницы.

#pdskzk{
 position: relative;
 display: inline-block;
}

Блочно-строчное отображение не помешает родительскому блоку (в том числе и контейнеру с со всплывающей подсказкой) растянуться на всю ширину окна. Теперь осталось создать поясняющий текст.

Всплывающие подсказки в css проще всего делать посредством псевдоэлементов:

#pdskzk:hover:after {
content: attr(data-name);
position: absolute;
left: 0;
bottom: 0;
background: rgba(5,13,156,.55);
color: #fff;
text-align: center;
font-family: cursive;
font-size: 14px;
padding: 3px 0;
width: 100%;
}

Несмотря на обилие кода, он очень прост для понимания. Селектор #pdskzk:hover:after необходим для создания псевдоэлемента after в тот момент, когда пользователь ставит курсор на контейнер с изображением. Свойство content: attr(data-name) предназначено для указания текстового значения. Оно соответствует свойству, которое записано в атрибуте data-name у контейнера-обертки изображения.

После этого остается позиционировать объект абсолютно и задать ему необходимые параметры:

Цвет;
Фон;
Шрифт и т.д.

Таким образом, получается такая всплывающая подсказка css при наведении на картинку:

Всплывающая css подсказка при наведении на картинку

По сравнению со стандартной подсказкой, этот вариант поясняющего текста при наведении на изображение выглядит более интересно и привлекательно. К тому же подсказка возникает сразу при наведении курсора на элемент. При этом плавное появление всплывающей подсказки невозможно из-за то, что псевдоэлементы не поддерживают такой функционал.

Плавное появление

Тем не менее, возможности css позволяют использовать плавное появление подсказки. В этом случае не используются псевдоэлементы. Это обусловлено тем, что именно они не позволяют применить опцию плавного появления. Пример реализации плавного появления всплывающей подсказки на css представлен ниже:

<div id = "pdskzk2">
 <img src = "pdskzk.jpg">
 <div class = "text">Текст подсказки</div>
</div>

Стоит заметить, что css-код практически не изменился:

#pdskzk2{
 position: relative;
 display: inline-block;
}
#pdskzk2 .text {
transition: all 0.6s;
opacity: 0;
position: absolute;
left: 0; bottom: 0;
background: rgba(5,13,156,.55);
color: #fff;
text-align: center;
font-family: cursive;
font-size: 14px;
padding: 3px 0;
width: 100%;
transform: scale(0);
}
#pdskzk2:hover .text{
 opacity: 1;
}

Ключевое изменение касается свойства content, которое не используется в этом примере. Оно потеряло актуальность ввиду того, что поддерживается только псевдоэлементами. Еще одно изменение – появление свойства transition. Именно это свойство отвечает за создание плавных переходов. Внимательный читатель наверняка обратил внимание на значение opacity: 0. Оно делает контейнер с подсказкой прозрачным.

Теперь при наведении на родительский блок достаточно вернуть стандартную прозрачность контейнеру с подсказкой. После этого можно проверить работу кода и убедиться в том, что поясняющий текст возникает на экране плавно.

CSS3 позволяет скрыть элемент и другими способами. Например, может использоваться трансформация. Этот метод предусматривает замену полной прозрачности на свойство transform: scale(0). Также необходимо уменьшить размер контейнера до 0. Таким образом, его не будет видно на странице. При наведении на контейнер с изображением нужно указать свойство transform: scale(1). Этот способ позволяет сделать появление всплывающего текстового сообщения не только плавным, но и эффектным.

Другие способы

Всплывающие текстовые сообщения можно создавать и посредством jQuery. Эта библиотека может использоваться как для написания своего кода, так и для создания плагина для всплывающих подсказок на jQuery, который реализует необходимый эффект.

Альтернативный вариант – всплывающие подсказки на Bootstrap. Этот фреймворк имеет множество готовых реализаций всплывающих подсказок. Достаточно только ознакомиться с документацией к Bootstrap и изучить доступные примеры кода. При этом совершенно необязательно полностью подключать этот фреймворк. Достаточно скачать и подключить компонент toolptips.

В целом сегодня существует огромное количество способов создания всплывающих подсказок без js. Благодаря такому разнообразию, можно использовать как стандартные реализации, так и более эффектные с плавным или резким появлением. Кроме того, не стоит забывать о возможностях библиотеки jQuery и фреймворка Bootstrap.