Тултипы на CSS3 и HTML5

В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.




Дисклеймер


На самом деле, css attr() для свойства псевдоэлемента content появился в CSS2 и в данном способе, в общем-то, нет ничего нового.

Простой способ



Здесь был пример

Этот способ сгодится там, где нужны небольшие «тултипчики» — всплывающие подсказки.

Для начала покажу код:

<span class="tooltip" data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span>


.tooltip {
	border-bottom: 1px dotted #0077AA;
	cursor: help;
}

.tooltip::after {
	background: rgba(0, 0, 0, 0.8);
	border-radius: 8px 8px 8px 0px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
	color: #FFF;
	content: attr(data-tooltip); /* Главная часть кода, определяющая содержимое всплывающей подсказки */
	margin-top: -24px;
	opacity: 0; /* Наш элемент прозрачен... */
	padding: 3px 7px;
	position: absolute;
	visibility: hidden; /* ...и скрыт. */
			
	transition: all 0.4s ease-in-out; /* Добавить плавности по вкусу */
}
		
.tooltip:hover::after {
	opacity: 1; /* Показываем его */
	visibility: visible;
}


Мы берём некий элемент (В нашем случае span), добавляем к нему атрибут с текстом, который будет показан и берём псевдоэлемент ::after. В content этого псевдоэлемента мы, пользуясь замечательнейшим свойством attr(), присваиваем нашей всплывающей подсказке текст и потом по :hover показываем его.
Думаю, остальные свойства понятны по комментариям в коде.

Отдельно хочу отметить, как ведёт себя анимация в Chrome и Opera (Возможно и в IE, за его отсутствием проверить я не имею никакой возможности).
Её нет. Связано это с тем, что WebKit и Opera не применяют transitions и animation к псевдоэлементам ::before и ::after.
По этому поводу в багтрекере WebKit зарегистрирован баг.

Способ для более сложных тултипов





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

Далее я рассмотрю лишь пример того, что можно сделать этим способом.

И снова код:

<a class="htooltip" href="http://habrahabr.ru/">qutIM
<span>qutIM — Свободный многопротокольный клиент. Он портирован под множество операционных систем. <img src="logo.png" />
</span>
</a>


.htooltip span { /* Внешний вид нашего тултипа */
	background-color: rgba(0,0,0, 0.8);
	border-radius: 15px 15px 15px 0px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
	color: #fff;
	margin-left: 2px;
	margin-top: -75px;
	opacity: 0; /* Делаем его прозрачным */
	padding: 10px 10px 10px 40px;
	position: absolute;
	text-decoration: none;
	visibility: hidden; /* И прячем */
	width: 350px;
	z-index: 10;
}
		
.htooltip:hover span { /* По hover отображаем тултип */
	opacity: 1;
	visibility: visible;
}
		
.htooltip span img { /* Изображение для примера */
	border: 0 none;
	float: left;
	margin: -71px 0 0 -234px;
	opacity: 0;
	position: absolute;
	visibility: hidden;
	z-index: -1;
}
		
.htooltip:hover span img { /* Показываем изображение */
	opacity: 1;
	visibility: visible;
}


Всё просто. Данные примеры можно лицезреть на этой страничке.

P.S. Некоторые спросят: А где же HTML5? В статье упомянуты data-* атрибуты, являющиеся частью спецификации HTML5.
Share post

Similar posts

Comments 46

    –3
    Симпатичный эффект, но мне кажется, что лучше бы было сделать все углы закругленными…
      +8
      Я так понял, здесь подразумевается «облако», как в комиксах. Причём острый (не скругленный) угол указывает на «говорящего» — на слово, к которому подсказка относится.
        –2
        Так даже еще симпатичнее будет!
      +2
      А можно сделать так, что бы тег выглядел вроде следующего?
      <span class="MyClass" img="image.gif">My Text</span>

      Чисто любопытно.
      И спасибо за статью.
        +2
        Если сделать примерно так, по стандарту CSS3 (Тыц)
        <span class="MyClass" data-img="image.png">My Text</span>
        


        .MyClass:hover::after {
        content: "";
        width: 50px;
        height: 50px;
        background-image: attr(data-img, url);
        background-color: rgba(0, 0, 0, 0.8);
        }
        


        Конечно, вышеприведённый код написан на правах теории.
          0
          если изображение носит чисто оформительский характер, как в примере — иконка, то лучше не перетаскивать ее из css в хтмл. для других случаев как раз и предусмотрен пример №2.
          –8
          Есть готовые jquery решения, не вижу смысла городить свое, правда.
          К примеру craigsworks.com/projects/qtip/ очень мощный.
          Есть и множество более простых вариаций.
            +12
            прошу прощения, не заметил что топик про чистый css :(
              +18
              jQuery головного мозга.
              +4
              Осталось сделать этот тултип рабочим на устройствах без мышиного курсора.
                +1
                возможно можно поиграться с :focused
                0
                проблема в том что его положение фиксировано, если линк расположен на границе экрана
                то tooltip вылазит за пределы и не читабелен, хотя даже многие решения на jQuery болеют тем же
                  –1
                  согласен, что положение баллунов и тултипов на надо расчитывать скриптом, к сожалению css в этом деле нам не помощник(
                    0
                    а как же calc? :)
                    0
                    Тултип просто с другой стороны от текста выводится и за пределы экрана не вылазит.
                      0
                      А как это у него получается?
                      Или вы точно знаете, где будет отрендерен тот или иной тег в потоке текста? Как тогда с переносимостью вёрстки?
                        0
                        А вы страницу открывали? Я понятия не имею, как это работает, но в опере и хроме тултип отобразился с другой стороны от текста.
                        0
                        а если ссылку к верхней границе подогнать скролом??
                        у меня tooltip вылазит
                      +3
                      Неплохо, открыл для себя свойство content: attr(data-tooltip) в css
                        0
                        Второму примеру — сто лет в обед
                          +3
                          мне одному захотелось кликнуть на qutIM?
                            +1
                            Я поступил хуже… Я кликнул!
                            0
                            Раздвигающиеся кнопки — очень креативно. Спасибо, отличная стать.я
                              –2
                              классная у вас подпись.

                              я.
                              +2
                              Собственно статья с www.css3.info/tooltips-with-css3/ говорит о, по сути, той же технике, но написана в 2008. И это не единственный пример в сети…
                                +1
                                Можно спросить? Отход от семантики это обязательное условие работы этого кода или все-таки ничего не мешает сделать стандартно:
                                <abbr title="I'm small tooltip. Don't kill me!">Hover me!</abbr>
                                  +1
                                  тогда поверх кастомного тултипа всплывет родной, браузерный
                                    0
                                    Может есть способ запретить этот tooltip?
                                      0
                                      не писать ничего в тайтл? оО
                                        0
                                        Нееее. title как раз семантически предназначен для таких вещей. Просто задачка, как мне показалось, снова свелась к красивостям за счет ухудшения семантики. Вот я и уточняю, можно ли как-то решить без жертв?
                                    +2
                                    Это же не аббревиатура. Почему бы не просто span?
                                      0
                                      Пусть будет <dfn>. Нашли к чему придираться.
                                        0
                                        dfn мне тоже пришёл в голову, но я подумал, что тултип не обязательно вешается на термин. В примере так точно не на термин.
                                          0
                                          По той же причине я укзал <abbr>, на который (а еще на <acronym>) тултипы вешаются чаще всего. А Таким «Hover me!» они нужны очень редко и тут действительно полезнее <dfn>.
                                      +1
                                      Hover me! — это не аббревиатура, значит это в вашем случае отход от семантики.
                                        0
                                        Пусть будет <dfn>. Суть не в этом, а в семантике как таковой.
                                      0
                                      Псевдо-элементы из CSS2, случайный data-атрибут и смотрите — уже красивый заголовок про CSS3 и HTML5. Класс!
                                        0
                                        Для вас был написан дисклеймер. Т.к. новые attr() атрибуты ещё не поддерживаются, то на большее пока рассчитывать нельзя.
                                          +1
                                          Дисклеймер читал. Просто писать «N на CSS3 и HTML5» это как «СЕКС. ШОК. ФОТО», жёлтенько.
                                            0
                                            На самом деле здесь огромный простор для фантазии, просто не хотелось усложнять простой пример украшательствами.
                                        0
                                        Было бы неплохо указать в каких браузерах работает эта фича.
                                          +1
                                          Firefox 3+, Opera 9.6+, Chrome, IE9+
                                          В теории, она должна работать везде, где есть псевдоэлементы и поддерживается псевдокласс :hover.
                                          0
                                          Прочитав заголовок, подумал что это пост «Good news, everyone! Решение найдено!». Однако…
                                          «overflow:hidden» — непобедимый враг всех кастомных тултипов. Ваш пример можно испортить так:
                                          .coo {width:300px; overflow:hidden; position:relative}
                                            0
                                            Firefox 8.0 @ Windows XP

                                              –1
                                              ну, лис как всегда
                                              • UFO just landed and posted this here

                                              Only users with full accounts can post comments. Log in, please.