Создание подсказок в ссылках

0 ∞

Подсказки (tooltips, screentips), отображаемые браузером при наведении на объект или ссылку – отличный способ сообщить что-либо посетителю сайта.

Сама идея подсказок была популяризована приложениями вроде Microsoft Word, которые имели множество командных кнопок с пиктограммами. Подсказки объясняли действие команды пользователю, когда тот задерживал указатель мыши над кнопкой.

Есть несколько способов создания подсказок, отображаемых браузером над ссылками. Из этой статьи вы узнаете, как преобразить эти подсказки, используя только HTML и CSS.

Необходимые ресурсы:

  • Знание основ CSS;
  • Немного свободного времени и терпения.

Исходные коды, использованные в этой статье, можно загрузить отсюда.

Содержание

Позиционирование подсказок сверху, снизу, справа или слева от ссылки

Начнём с создания разметки. Текст подсказки будет находиться в элементе span. Присвоим класс каждой ссылке, чтобы затем стилизовать их:

<a class="top_tooltip" href="">TOP POSITION<span>This is a top position tooltip!</span></a>
<a class="left_tooltip" href="">LEFT POSITION<span>This is a left position tooltip!</span></a>
<a class="right_tooltip" href="">RIGHT POSITION<span>This is a right position tooltip!</span></a>
<a class="bottom_tooltip" href="">BOTTOM POSITION<span>This is a bottom position tooltip!</span></a>
Создание Meta-тегов

Стили

Теперь, когда разметка готова, зададим оформление ссылок:

a.top_tooltip,a.left_tooltip,a.right_tooltip,a.bottom_tooltip {
    display: inline;
    position: relative;
}

Как видите, наши подсказки являются строчными (inline) элементами с относительным позиционированием. Добавим подсказкам визуальной привлекательности, поместив их в прямоугольник со скруглёнными краями. Позиционированием подсказок мы будем управлять с помощью полей (margin) и свойства position:

/* TOP TOOLTIP
-------------------------------------------------*/
a.top_tooltip span {
    width: 140px;
    height: auto;
    color: #fff;
    background: #2b2b2b;
    position: absolute;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    line-height: 20px;
    visibility: hidden;
    border-radius: 10px;
}

a.top_tooltip span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #2b2b2b;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

a:hover.top_tooltip span {
    visibility: visible;
    opacity: 0.8;
    bottom: 30px;
    left: 50%;
    margin-left: -76px;
    z-index: 999;
}

/* LEFT TOOLTIP
-------------------------------------------------*/
a.left_tooltip span {
    width: 140px;
    height: auto;
    color: #fff;
    background: #2b2b2b;
    position: absolute;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    line-height: 20px;
    visibility: hidden;
    border-radius: 10px;
}

a.left_tooltip span:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid #2b2b2b;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* RIGHT TOOLTIP
-------------------------------------------------*/
a.right_tooltip span {
    width: 140px;
    height: auto;
    color: #fff;
    background: #2b2b2b;
    position: absolute;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    line-height: 20px;
    visibility: hidden;
    border-radius: 10px;
}

a.right_tooltip span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -8px;
    width: 0;
    height: 0;
    border-right: 8px solid #2b2b2b;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

a:hover.right_tooltip span {
    visibility: visible;
    opacity: 0.8;
    left: 100%;
    top: 50%;
    margin-top: -30px;
    margin-left: 10px;
    z-index: 999;
}

/* BOTTOM TOOLTIP
-------------------------------------------------*/
a.bottom_tooltip span {
    width: 140px;
    height: auto;
    color: #fff;
    background: #2b2b2b;
    position: absolute;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    line-height: 20px;
    visibility: hidden;
    border-radius: 10px;
}

a.bottom_tooltip span:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-bottom: 8px solid #2b2b2b;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

a:hover.bottom_tooltip span {
    visibility: visible;
    opacity: 0.8;
    top: 30px;
    left: 50%;
    margin-left: -76px;
    z-index: 999;
}
Создание таблицы в HTML

Селектор :hover поможет нам сделать подсказки видимыми, когда это нужно. А :after определит окончательное местоположение подсказки.

Изменение цвета подсказки

Теперь, когда мы задали основу подсказки, изменить её отдельные параметры вроде цвета не составит труда. Во-первых, нужно задать цвет фона (атрибут background) элемента span:

a.bottom_tooltip_red span {
    background: #cf1c1c;
}

Во-вторых, цвет рамки должен соответствовать цвету фона. Мы внесём соответствующую правку в селектор :after.

В нижеприведённом примере мы изменим цвет подсказки, располагающейся снизу ссылки. Поэтому манипуляции нужно проводить со свойством border-bottom:

a.bottom_tooltip_red span:after {
    border-bottom: 8px solid #cf1c1c;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

Добавление анимации к подсказке

Возможности CSS3 позволяют нам добавить современно выглядящие эффекты к нашим подсказкам. Давайте научимся пользоваться эффектами угасания (fading) и скольжения (sliding).

Чтобы создать эффект угасания, необходимо манипулировать прозрачностью элемента span в обычном состоянии и с наведённым на него указателем мыши с использованием свойства transition. Всё это реализует следующий код:

a.left_tooltip_fading span {
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    opacity: 0;
}

a:hover.left_tooltip_fading span {
    opacity: 1;
}

Заметьте, что функция перехода ease-in-out обеспечивает наиболее плавное возникновение и угасание подсказки.

Также можно ещё создать эффект прыгающего мяча при помощи свойства translate3d селектора :hover. Для этого добавьте в селектор следующий код:

a:hover.bottom_tooltip_sliding span {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    transition: .3s ease;
}

Отображение картинки в подсказке

Следующая задача – самая простая в нашем сегодняшнем уроке. Просто поместите картинку в span и задайте ссылке соответствующий класс. Если вы хотите добавить также и текст, отрегулируйте соответствующим образом размер изображения. Вот пример разметки:

<a class="images_tooltip" href="">IMAGES<span><img height="100" src="img/cat.jpg" width="70"></span></a>

Заключение

Готово! Теперь вы научились делать замечательные, красочные подсказки, используя HTML и CSS3. Хотя сделать несколько подсказок вручную не составляет труда, в больших проектах имеет смысл применить такие средства, как CSS-библиотека Hint.css или jQuery-библиотека tooltipster.js.

Надеюсь, вам понравилось то, что вы узнали сегодня. До встречи!

РедакцияПеревод статьи «Customize Your Anchor Link Tooltips Using This Tutorial»