Простые подсказки со стрелками на 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. Alinaki

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

    1. Alinaki

      *для after, конечно же

  2. GreLI

    К сожалению на айпаде виден нахлёст уголка на тултип:

    1. psywalker (Автор записи)

      Это зависит от браузера. В Firefox, например, всё в порядке.

  3. kama812

    в хроме тоже виден нахлест

    1. psywalker (Автор записи)

      В Chrome да, есть такое дело)

      1. ashowtimes

        Если привести все значения к px, то можно избавиться от всех нахлёстов.

Оставить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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