Узнайте, как создать всплывающую подсказку на чистом HTML и CSS

HTML подсказка — это блок с дополнительной информацией, который появляется при наведении курсора мыши на определенный элемент веб-страницы. Сегодня мы создадим собственную всплывающую подсказку с помощью HTML и CSS:

tooltip-tutorial-featured-900x538

Посмотреть демо-версию | Скачать исходный код

Мы сможем использовать CSS-подсказки для большинства элементов, таких как ссылки, теги, стилизованный текст и т.д. Нам нужно будет применить к элементу несколько классов и добавить атрибут data- с текстом всплывающей подсказки.

Настройка документа

Нам нужно создать HTML-документ и задать исходную разметку:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tooltips Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Work+Sans:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
// контент
    </div>
</body>
</html>

Я добавил ссылку на Normalize.css, которая помогает сбросить все стили браузера по умолчанию, и гарантирует, что каждый элемент будет выглядеть одинаково во всех браузерах. В отличие от стандартного сброса CSS Normalize.css не удаляет все стили по умолчанию, так что вам не нужно будет переписывать стиль каждого элемента с нуля.

Я создал div с классом container, в который мы поместим основные примеры всплывающих подсказок HTML. Вот стили для body и класса .container:

body {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.5em;
    line-height: 1.4em;
    font-weight: 700;
    background-color: #28ABE3;
    color: #fff;
}
.container {
    width: 800px;
    margin: 100px auto;
    background: radial-gradient(circle farthest-corner at 400px 250px , #64BBE0 0%, #28ABE3, #28ABE3 95%);
}

Я отцентрировал div контейнера, присвоив для margin-left и margin-right значения auto. Также добавил несколько стилей для раздела body, чтобы он выглядел лучше.

Я решил добавить для фона небольшой светлый CSS-градиент. Если браузер не поддерживает CSS-градиенты (это касается в основном IE 8 и 9), цвет фона будет переключен обратно на синий по умолчанию (цвет фона раздела body).

Я буду использовать HTML подсказки при наведении с тегами анкоров, но вы можете назначить классы других встроенных элементов, таких как strong tag или span. Ниже приводится содержимое div контейнера:

<ul class="tooltip-wrapper">
            <li><a href="#" class="tooltip tooltip-top" data-tooltip="Hey, I'm at the top!">Tooltip top</a></li>
            <li><a href="#" class="tooltip tooltip-bottom" data-tooltip="And I'm at the bottom">Tooltip bottom</a></li>
            <li><a href="#" class="tooltip tooltip-left" data-tooltip="I'm left all alone">Tooltip left</a></li>
            <li><a href="#" class="tooltip tooltip-right" data-tooltip="You're wrong and I'm right">Tooltip right</a></li>
</ul>

Маркированный список содержит четыре элемента с тегами анкоров. Я изменил стили элементов списка, чтобы они не содержали маркеры списка, а отображались как inline-block. Это позволит нам добавить отступы между ними:

.tooltip-wrapper {
    padding: 160px 0;
    text-align: center;
}
.tooltip-wrapper li {
    list-style: none;
    display: inline-block;
    margin: 0 10px;
}
.tooltip-wrapper li a {
    color: #fff;
    text-decoration: none;
}

Давайте подробнее рассмотрим тег анкора:

<a href="#" class="tooltip tooltip-left" data-tooltip="I'm left all alone">Tooltip left</a>

Я назначил для ссылок два класса. Класс tooltip будет отвечать за тело подсказки, а второй — определять ее размещение.

Вы также можете видеть пользовательский атрибут data-, который содержит текст нашей HTML подсказки.

Создание класса tooltip

Ниже приведен код класса tooltip:

.tooltip {
    position: relative;
}
.tooltip:after {
    position: absolute;
    padding: 8px;
    border: 3px solid #fff;
    border-radius: 8px;
    background-color: #1FDA9A;
    font-size: .9em;
    font-weight: bold;
    color: #fff;
    content: attr(data-tooltip);
    min-width: 80px;
    /* width: -moz-max-content; */
    /* width: -webkit-max-content; */
    opacity: 0;
    transition: all .2s ease-in-out .25s;
    visibility: hidden;
    z-index: 2;
}
.tooltip:hover:after {
    opacity: 1;
    visibility: visible;
}

Сама HTML всплывающая подсказка при наведении — это псевдоэлемент :after, она позиционируется абсолютно. Вот почему необходимо присвоить относительную позицию элементу анкора. Я добавил несколько основных стилей, такие как отступ, рамка, размер шрифта и ширина. Давайте более внимательно рассмотрим свойство content.

Оно содержит attr() — значение, в котором хранятся наши пользовательские data-tooltip, и использующее их, чтобы вывести текст самой подсказки. Вместо data-tooltip вы можете использовать любое другое имя, просто убедитесь, что оно начинается с data-. Больше о данных атрибутов вы можете узнать здесь.

Тело подсказки имеет минимальную ширину 80 пикселей. Если нужно, чтобы содержимое подсказки растягивалось в одну строку, то добавьте для свойства ширины значение max-content, которое в данный момент вынесено в комментарии. Следует отметить, что это экспериментальная функция, поэтому вы должны использовать вендорные префиксы -webkit- и -moz-.

Чтобы задать для HTML подсказки при наведении эффект слайд-анимации, мы используем свойство transition. Обратите внимание на значение .25s, которое указывает задержку перед тем, как подсказка отображается или скрывается. Таким образом, она не будет выводиться, если вы наведете курсор мыши на текст по ошибке, а только при наведении курсора на более продолжительное время. Я также задал непрозрачность 0 и видимость hidden. Мы не можем использовать display: none;, потому что элемент полностью исчезнет, и мы не увидим каких-либо эффектов перехода. Непрозрачность и видимость изменяются при наведении на элемент указателя мыши.

Результат:

Посмотреть

Примечание: Я изменил / удалил часть разметки и стилей в демо-версии на CodePen. Чтобы увидеть окончательный результат, посмотрите демонстрационный пример в конце этой статьи.

Добавление движения

Теперь, когда мы реализовали появление / исчезновение HTML всплывающей подсказки при наведении, давайте заставим ее двигаться. Мы уже назначили свойство анимации, и нам осталось задать исходную позицию, откуда она должна появляться, и конечную:

/*Исходная позиция подсказки*/
.tooltip-top:after {
    bottom: 150%;
    left: 0;
}
.tooltip-bottom:after {
    top: 155%;
    left: 0;
}
.tooltip-left:after {
    right: 130%;
    min-width: 100px;
}
.tooltip-right:after {
    left: 130%;
    min-width: 100px;
}

/*Конечная позиция подсказки*/
.tooltip-top:hover:after {
    bottom: 120%;
}
.tooltip-bottom:hover:after {
    top: 125%;
}
.tooltip-left:hover:after {
    right: 110%;
}
.tooltip-right:hover:after {
    left: 110%;
}

Я решил добавить этот функционал в дополнительные классы. Таким образом, если вы назначите, например, класс .tooltip-left, подсказка будет выводиться слева от текста, если добавите .tooltip-top, подсказка будет выводиться сверху, и т.д.

Посмотреть демо

В этой демо-версии я использую класс .tooltip-right. Вы можете поэкспериментировать и применить различные классы, чтобы задать различные позиции всплывающей подсказки HTML.

Создание треугольника

Последним элементом всплывающей подсказки является маленький треугольник на одной из сторон блока. Мы создадим его с помощью псевдокласса :before (псевдокласс :after уже использован для самой подсказки). Мы назначаем его для наших четырех классов позиции, чтобы для каждой из них треугольник выводился соответственно:

/**
 * Треугольники
 */

.tooltip-top:before,
.tooltip-bottom:before,
.tooltip-left:before,
.tooltip-right:before {
    content: "";
    display: block;
    position: absolute;
    border-width: 7px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: all .2s ease-in-out .25s;
    visibility: hidden;
}
.tooltip-top:hover:before,
.tooltip-bottom:hover:before,
.tooltip-left:hover:before,
.tooltip-right:hover:before {
    opacity: 1;
    visibility: visible;
}

Мы создаем треугольник, задав ширину для рамки, когда сам элемент не имеет ширины или высоты. В этом случае ширина рамки устанавливается в 7 пикселей. Цвет рамки является полностью прозрачным, что очень важно. В следующем фрагменте кода я назначаю цвет для соответствующей стороны рамки, что позволяет задать форму треугольника.

Остальная часть стилей выглядит аналогично тому, что мы делали для тела HTML подсказки при наведении. У нас те же переходы, позиция является абсолютной, непрозрачность устанавливается на 0 и видимость — скрытая:

/*Начальная позиция треугольника*/
.tooltip-top:before {
    top: -51%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #fff;
}
.tooltip-bottom:before {
    bottom: -56%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #fff;
}
.tooltip-left:before {
    left: -31%;
    top: 15%;
    border-left-color: #fff;
}
.tooltip-right:before {
    right: -31%;
    top: 15%;
    border-right-color: #fff;
}

/* Конечная позиция треугольника */
.tooltip-top:hover:before {
    top: -21%;
}
.tooltip-bottom:hover:before {
    bottom: -26%;
}
.tooltip-left:hover:before {
    left: -11%;
}
.tooltip-right:hover:before {
    right: -11%;
}

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

Результат:
Посмотреть

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

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

Посмотреть демо-версию | Скачать исходный код

Заключение

Этот код поможет вам понять, как сделать подсказку в HTML. Вы можете изменить стили, чтобы они соответствовали дизайну вашего блога, а также можете изменить продолжительность и скорость анимации. Чтобы использовать их, примените к элементу класс tooltip и класс позиции, а также задайте для атрибута data-tooltip свой текст подсказки.

Перевод статьи «Learn How to Create a Pure HTML & CSS Tooltip» был подготовлен дружной командой проекта Сайтостроение от А до Я.