CSS-live.ru

Простые подсказки со стрелками на CSS

Очень простые CSS3-подсказки со стрелками. Ключём к созданию этих подсказок являются псевдо-элементы (:after и :before). Псевдо-элемент :after получает текст из атрибута "title" с помощью функции "attr()" в качестве своего контента и соответственно стилизуется так, как нам надо. Чтобы создать сами стрелки, используется псевдо-элемент :before, а треугольнички внизу подсказки делаются с помощью границ.

Подсказки становятся видимыми в тот момент, когда пользователь наводит указатель мыши на ссылку. Здесь мы используем псевдо-класс :hover. В итоге получается классный и полезный эффект.

Давайте посмотрим код.

HTML:

<p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero.</p>
<p>Vestibulum mollis mauris <a href="#" class="tooltip" title="Sample tooltip">pellentesque</a> enim.  euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris.</p>

CSS:

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover {
    color: #c00;
    text-decoration: none;
}

.tooltip:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(title);
    display: block;
    left: 1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}

.tooltip:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}

/* this part styles only a paragraph  */

p {
    color: #333;
    font: normal .875em "Lucida Grande",Arial,sans-serif;
    margin: 1em auto;
    width: 75%;
}

А вот и пример:

Перевод статьи "Pure CSS Tooltip With Arrow" с сайта "cssdeck.com", автор Winston Wolf.

P.S. Это тоже может быть интересно:

7 комментариев

  1. Оставлять атрибут title нельзя. Нужно использовать какой-нибудь data-title для :before, например:
     
    content: attr(data-title);
    Просто потому, что иначе будут отображаться и title и псевдо-подсказка.

Добавить комментарий для Alinaki Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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