Анимированные всплывающие подсказки (tooltip) на CSS

Всплывающие подсказки это отличный способ для улучшения UI, в том случае если пользователю нужен дополнительный контекст для определенного элемента на сайте. В этом уроке мы создадим анимированные всплывающие подсказки, с использованием HTML и CSS.

Для начала взгляните на демонстрационный пример, чтобы иметь представление с чем вам придеться работать.

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

<span tooltip="message">visible text or icon, etc.</span>

FAQ

Не требует JavaScript
Работает на селекторах атрибутов, а не на классах
Не нуждается в отдельных элементах DOM
Примеры кода поставляются без префиксов (вы можете добавить их в своих проектах)
Работает при наведении курсора
Поддерживает только текст (HTML, изображения и т.д. не поддерживаются)
Легкая анимация при вызове всплывающих подсказок

Всплывающие подсказки будут работать полностью на псевдо-элементах ::before и ::after, которые мы можем контролировать с помощью CSS.

Еще один важный момент - позиционирование. Элемент к которому мы добавляем всплывающую подсказку, должен иметь следующее позиционирование:

position: relative
position: absolute
position: fixed

Селекторы атрибутов. Быстрый взгляд

Большинство CSS правил пишутся с использованием классов. Но CSS также имеет несколько других типов селекторов. Для работы наших всплывающих подсказок мы будем использовать селектор атрибутов - они обозначаются квадратными скобками:

[foo] {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

Пример элемента с атрибутом foo:

<span foo>Check it out!</span>

В результате span с атрибутом foo окрасится в белый цвет, с полупрозрачным черным фоном.

Почему именно селектор атрибутов?

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

Рассмотрим пример: класс .tooltip vs. атрибут [tooltip]. Имя класса является одним из значений атрибута class, атрибут tooltip имеет в качестве значения текст который мы будем отображать при наведении.

<span class="tooltip another-classname">lorem ipsum</span>

<span tooltip="sit dolar amet">lorem ipsum</span>

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

Наши всплывающие подсказки будут использовать два различных атрибута:

tooltip: Содержит текст подсказки
flow: опциональный атрибут, позволяет определить с какой стороны будет появляться всплывающая подсказка (сверху, снизу, слева, справа)

1. Позиционирование

Для родительского элемента установим относительное позиционирование:

[tooltip] {
  position: relative;
}

2. Псевдо-элементы

Перейдем к псевдо-элементам ::before и ::after. Свойство content является обязательным для работы псевдо-элементов, но мы определим его позже.

[tooltip]::before,
[tooltip]::after {
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;

    /* opinions */
    text-transform: none;
    font-size: .9em;
}

3. Треугольник

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

[tooltip]::before {
    content: '';
    z-index: 1001;
    border: 5px solid transparent;
}

Мы оставили значение свойства content пустым, так как нам не нужно добавлять каких-либо дополнительных элементов к подсказке.

Для создания треугольника мы используем свойство border на пустом контейнере, который не имеет контента, высоты и ширины, затем устанавливаем рамку только с одной стороны контейнера.

4. Стиль всплывающей подсказки

Обратите внимание на свойство content: attr(tooltip). Этот псевдо-элемент должен использовать значение атрибута tooltip в качестве его содержания.

[tooltip]::after {
    content: attr(tooltip);
    z-index: 1000;

    font-family: Helvetica, sans-serif;
    text-align: center;

    /*
    Let the content set the size of the tooltips
    but this will also keep them from being obnoxious
    */
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* visible design of the tooltip bubbles */
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
}

5. Взаимодействие

Всплывающую подсказку мы будем вызывать при наведении курсора мыши:

[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
}

Как вы помните, на втором шаге, для всплывающей подсказки мы использовали два свойства opacity: 0 и display: none. Это для того чтобы мы могли добавить к ним анимацию для появление и скрытия подсказки.

Свойство display не может быть анимированно, но вместо этого мы можем анимировать свойство opacity. Если вы не хотите использовать анимацию, просто удалите свойство opacity: 0 из второго шага, и можете не переходить к шагу 7.

Также нам нужно предотвратить появление пустой всплывающей подсказки:

[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}

6. Настройка позиционирования всплывающей подсказки

Это довольно сложный шаг, так как мы будем использовать немного не стандартные селекторы для определения позиции появления подсказки.

Для начала взглянем на селекторы которые мы будем использовать:

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    /* ...
    properties: values
    ... */
}

Этом мы говорим браузеру "Для всех элементов с атрибутом tooltip, которые не имеют атрибут flow, или имеют атрибут flow со значением up и применяем эти стили для псевдо-элементов ::before".

Вверх (по умолчанию)

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}

Вниз

[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #333;
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}

Влево

[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #333;
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);

Вправо

[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}

7. Анимация

Для анимации нам понадобятся два @keyframes. Всплывающие подсказки которые будут появляться вверх/вниз будут использовать keyframe tooltips-vert, а всплывающие подсказки которые появляются слева/справа будут использовать keyframe tooltips-horz. Обратите внимание, что во всех ключевых кадрах мы определяем только конечные состояния анимации.

@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

Теперь нам нужно применить эту анимацию при наведении на элемент с атрибутом tooltip.

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation:
        tooltips-vert
        300ms
        ease-out
        forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation:
        tooltips-horz
        300ms
        ease-out
        forwards;
}

Вам требуются услуги или консультация специалиста по веб-разработке?

Свяжитесь со мной