Иногда возникает необходимость сделать всплывающую подсказку, допустим к ссылке, но использовать что-нибудь кроме CSS не хочется. Не стандартный alt или title, а именно нормальную подсказку (tooltip).
Вот один из методов как это можно сделать не используя ничего кроме CSS и магии.
Сначала пример:
Если интересно — читаем дальше.
Итак, рецепт:
HTML:
<a class="tooltip" href="#"> Ссылка <span>Подсказка<small></small></span> </a>
Пока все просто. Далее начинается магия.
CSS:
/* tooltip */
.tooltip { position: relative; }
.tooltip span {
position: absolute;
right: 0;
top: -30px;
display: none;
min-width: 50px;
padding: 3px 8px;
white-space: nowrap;
font-size: 11px;
text-align: right;
background-color: rgba(0,0,0,.8);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
}
.tooltip span small {
position: absolute;
right: 10px;
bottom: -6px;
border-top: 6px solid rgba(0,0,0,.8);
border-left: 6px solid transparent;
}
.tooltip:hover span { display: block; }
Теперь остается лишь вставить костыль для IE:
/* для IE */
.tooltip span { background-color: #000; }
.tooltip span small { border-top: 6px solid #000; }
/* фиксим проблему со стрелочкой в IE 6 */
*html .tooltip span small {
border-left: 6px solid #363636; /* Соответствует цвету фона */
}
/* фиксим проблему в IE 8 */
.tooltip span { background-color /*\**/: #000\9 }
.tooltip span small { border-top /*\**/: 6px solid #000; }
На это магия заканчивается.
Внимательный читатель заметит, что бакгроунд для вменяемых браузеров задан в формате RGBa — это дает полупрозрачность. Я где-то встречал что и для IE его можно применять через фильтры, но сейчас вспомнить не удалось. Поэтому, данную тему оставим на следующий раз. Удачи.
UPD: Да действительно IE можно научить понимать RGBa через фильтр.
2leep.com
19 февраля 2010 в 5:38
Нижайший поклон и всяческие уважения, очень просто и очень во время, и работает! И только на css! Сегодня же использую в работе.
19 февраля 2010 в 13:40
Суперски получилось. Будем играться
19 февраля 2010 в 11:58
Рецептик супер, понадобится по-любому. Причем все очень просто. Спасибо!
19 февраля 2010 в 14:53
Как так у тега small бордеры наискосок идут. На самом деле магия. Не знал.
20 февраля 2010 в 3:18
благодарю, подсказочка красивая получается
22 февраля 2010 в 17:11
Огромное спасибо, очень во время, так как только начинаю осваивать WP (до этого только DataLife и немного Joomla) и как раз нашел то, что искал… Ну и за примеры отдельное спасибо:) а то без них все это сложно для понимания…
22 февраля 2010 в 22:20
Блин, спасибо, классная вещь получаться, и главное только css, ни чего лишнего.
23 февраля 2010 в 14:44
Опера — версия 10.01 некорректно отображает tooltip. Он смещается вверх. Из-за чего пока не понимаю, попробую пофиксить.
25 февраля 2010 в 13:52
Попал на сайт случайно, но когда прочел пару статей, до того понравилось что начал читать дальше…и про бэйдж с датой, и про 10 инструментов, и про CSS хаки и Выпадающее меню на CSS.
Искренняя благодарность автору блога, давно искал подобные материалы.
25 февраля 2010 в 16:00
Пока письмо не получил — считал коммент спамом
28 февраля 2010 в 8:09
Согласен, любопытный способ.
Постараюсь применить у себя.
P.s. Пять минут игрался с бегунком в меню. Понравилось…
01 марта 2010 в 9:50
Спасибо за информацию, уже давно хотел сделать красивую всплывающую подсказку, но не знал как! Еще раз спасибо!
01 марта 2010 в 10:03
Слушай, отличный метод! А я раньше как дурак его через JavaScript делал
02 марта 2010 в 16:04
[...] недавно. Fenris рассказывает у себя на блоге как сделать красивую всплывающую подсказку (tooltip) на CSS. У SeoProfy нашел полезную статейку по проверки контента [...]
02 марта 2010 в 21:32
Да полезная шутка, но у меня например есть на одном сайте такое с картинкой. Так там подсказдка перемещается вместе с мышкой. Интересно такое реально сделать с тестом?
Понимаю, что это не совсем то и нужно, но все же. Или без Ява Скрипт не обойтись?
02 марта 2010 в 21:48
Если я правильно понял вопрос, то только с JS.
12 марта 2010 в 13:22
Замечательно вышло. Мне обязательно пригодится данный метод для моего сайта.
10 апреля 2010 в 14:29
Судя по примеру получается офигенно.Попробуем,спасибо
16 апреля 2010 в 14:14
Имейте в виду! Под IE6 этот код не работает. Совершенно. В коде под IE6 есть масса грубых ошибок.
16 апреля 2010 в 10:03
Спасибо, подсказка красивая получается
16 апреля 2010 в 10:45
Что именно не работает?
03 мая 2010 в 9:18
Интересный вариант! Попробую воплотить у себя!
11 мая 2010 в 13:00
Очень интересный вариант, стоит попробовать
24 сентября 2010 в 17:49
а у меня только круглая часть образовалась, "сноски" нету, почему так?
04 декабря 2010 в 6:20
Интересно, как успешно такая ссылка проиндексируется поисковыми системами. Куча кода и.. магии
30 декабря 2010 в 16:22
Если в tooltip вставить a href, то ссылка помещается не в подсказку, а на на страницу. Как это можно исправить?
30 декабря 2010 в 21:36
Только шаманить со стилями, чтобы вложенные ссылки не наследовали стили
12 февраля 2011 в 16:50
Класс, все время думал, что это JavaScript, чувствую что буду пользоваться вашими услугами.
28 февраля 2011 в 14:10
Спасибо, очень круто! =)
22 марта 2011 в 13:27
Все бы хорошо, но стоит ссылку текстом заменить на картинку — в IE начинаются проблемы с вертикальным позиционированием…
06 июня 2011 в 8:34
при загрузке страницы в тестере ie6 есть ошибка скрипта, после нажатия продолжить — ничего уже не работает, видимо фикс какой то стоит
06 июня 2011 в 9:57
Как бы смешно это не звучало, но под ие-тесер я не тестил. Дело в том, что любой эмулятор работает по одному ему известным принципам. Нет абсолютно никакой гарантии, что он не добавляет своих багов к уже имеющимся. Я бы просто положил железобетонный болт на ие6. Этот браузер — атавизм и заморачиваться его поддержкой значит не уважать себя, да и просто глупо.
21 июня 2011 в 8:07
Что-то не появляется ссылка в сайд-баре((
21 июня 2011 в 9:53
Если вы сделали все как описано в статье — все должно было получиться. В любом случаи чтобы найти баг надо видеть код.
14 июля 2011 в 0:41
Спасибо!
а вот у меня такой вопрос возник…а можно вставить как-нибудь в эту всплывающую подсказку картинку..?
14 июля 2011 в 8:03
Вполне может получится. Если будите пробовать — отпишитесь потом о результатах.
03 августа 2011 в 20:38
Как сдлеать к изображению?
24 сентября 2011 в 14:53
Здравствуйте, Владимир и уважаемые гости блога, применил данную подсказку на сайте системы Ucoz, сначала все работало отлично, но после моих экспериментальных изменений форма подсказки пропала, а текст остался (пытался изменить цвет формы). Пытался исправить — не помогло. Отмена всех моих последних действий вообще убила подсказку! При наведении курсором слово выделяется, а никакой подсказки нет (ни формы, ни текста). Пытался удалять все и прописывать все заново, но не помогло. Все это происходило в Mozilla Firefox.
В опере сейчас от подсказки появляется только текст, и то только после нажатия ЛКМ.
Не могу понять, в чем проблема. Может это у Ucoz'a проблемы с CSS? Заранее спасибо
26 сентября 2011 в 17:46
Для начала… я не телепат, поэтому сайт в студию. А вообще попробуйте сделать все с самого начала или вообще на отдельной странице на локальной машине — это поможет понять принцип работы и что за что отвечает.
05 октября 2011 в 13:26
Точно также