Пользовательские подсказки на веб-сайте

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

С появившимся в HTML5 атрибутом “Data” информация может быть применена к любым отдельным элементам . Эти атрибуты могут быть считаны с помощью CSS3 и, таким образом показать содержание подсказки.

Как создать пользовательский атрибут?
Все эти атрибуты начинаются с “data-“, а затем добавляется уникальное имя.

В HTML дополнительная информация для слова записывается следующим образом:

<span class="tooltip" data-tooltip="HyperText Markup Language">
  HTML
</span>

Теперь начинается настоящая работа, потому что это подсказка разработана с CSS3. Для начала, подсказка получает “position: relative“, что бы она правильно позиционировалась.

[data-tooltip] {
    position: relative;
    display: inline-block;
}

В следующем шаге с помощью псевдо-элемента “:before” создаётся стрелка, указывающая на поясняемое слово. При этом, что бы псевдо-элемент отображался, “content” должен  присутствовать, даже если он, как в этом случае, остаётся пустой. Стрелка появляется только при наведении указателем мыши на слово и элемент становится невидимым “visibility: hidden. И с помощью “opacity” от “0” к “1” медленно появляется. При использовани “margin-top” стрелка сначала появится  над словом (-8px), а затем перенесётся в течение 0,3 сек под слово (margin-top: 5px).

[data-tooltip]:before {
    content: '';
    position: absolute;
    visibility: hidden;
    opacity: 0;
    width: 0;
    margin-top: -8px;
    border: 8px solid transparent;
    border-bottom: 10px solid #568bbc;
    border-top: none;
    z-index: 1001;
    transition: .3s;
}

[data-tooltip]:hover:before,
[data-tooltip]:focus:before {
    visibility: visible;
    opacity: 1;
    margin-top: 5px;
}

.tooltip:before {
    top: 100%;
    left: 45%;
}

span.tooltip {
    cursor: help;
    border-bottom: 1px dotted #000;
    line-height: 1.1em;
}

Для того, что бы сделать фон для подсказки, используется псевдо-элемент “:after”. При этом, можно добавить тень вокруг острия стрелки так, чтобы она лучше выделялась на фоне текста.

[data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    visibility: hidden;
    opacity: 0;
    margin-top: -1px;
    padding: 8px 10px;
    background: linear-gradient(#568bbc,#39648c);
    border-radius: 5px;
    text-shadow: 0 -1px 0 #000;
    font-size: .75em;
    line-height: 1.4em;
    white-space: nowrap;
    color: #fff;
    box-shadow: 10px 10px 12px #111;
    z-index: 1001;
    transition: .3s;
}

[data-tooltip]:hover:after,
[data-tooltip]:focus:after {
    visibility: visible;
    opacity: 1;
    margin-top: 5px;
}

.tooltip:after {
    top: 100%;
    left: 45%;
    margin-left: -50%;
}

Вот и все! Подсказка для тестирования готова!

Совет: Подсказки, с помощью команды ” white-space: nowrap ” располагаются всегда в ряд, но для длинных текстов, желательно удалить эту деталь и работать с определенной шириной или высотой.

Оригинал / Перевод