Простой тултип или всплывающая подсказка

15 February, 2006

XHTML/CSS

Довольно часто применяю этот простой прием, но еще о нем не рассказывал. Суть – при наведении мыши на определнный текст появляется краткое пояснение или расширенная информация рядом с текстом. Вот примерпример для оперы – оговорка одна – тултипы не должны перекрывать другие “тултипные” ссылки).

HTML

Так как :hover пока в ИЕ к сожалению поддерживается только для элемента a(ссылок) то вынужденный код – такой:

  1. <a class=”tt” href=”#”> Текст ссылки
  2. <span>Пояснение к ссылке </span>
  3. </a>

Класс tt просто говорит о том что спан внутри таких ссылок будет отображаться по наведению мышки. Без CSS данная конструкция выглядит вполне логично. К тому же можно вспомнить о поисковой оптимизации и использовать вот этот прием.

CSS

Дело за малым – заставить это все работать :).
Вот такое простое CSS волшебство заставит тултип тултипиться :):

  1. a.tt span{
  2. display:none;/*собственно прячем тултип – пока мышь не наведена*/
  3. }
  4. a.tt:hover{
  5. position:relative;/*Ставим точку отсчета для тултипа внутрь данной ссылки*/
  6. z-index:23;/*это нужно что бы тултип показывался поверх этой и других ссылок*/
  7. }
  8. a.tt:hover span{
  9. display:block;/*показываем тултип при наведении*/
  10. position:absolute;
  11. top:-10px;
  12. left:40px;/*три строки для позиции тултипа относительно левого верхнего угла ссылки*/
  13. z-index:22;/*мне 22 + см. выше*/
  14. background:#fafafa;/*фон, что бы было видно тултип*/
  15. }

Вот собственно и все. Остальное украшательсво. Рабочий пример минимально приукрашенный + пример из жизни (даты 7 8 9 в календаре).

Конец

Вот такой до боли простой приемчик, нередко довольно эффектно выглядящий.
Конечно ему не тягаться с тултипами гоняющимися за курсором мыши. Но и им по простоте с ним не тягаться. :)

Авось кому сгодится…

Попап имеет вредное свойство “залипать” в Опере. Точнее это Опера имеет вредное свойство оставлять попап видимым даже после отвода мышки от ссылки. Вредное свойство проявляется далеко не всегда.:-)

Вариант для оперы

XHTML/CSS

42 комментариев к “Простой тултип или всплывающая подсказка”

alex-and-r | 1. 15 February, 2006

Хм…

Вопрос первый: семантическая корректность. Как с ней быть? Вы не брали это в расчет?
Вопрос второй: seo. Там же четко про бан в комментах говорится по ссылке на пример поисковой оптимизации, нет?
Вопрос третий (собственно больше всего интересующий, а остальные так, риторические): значение “23” для св-ва “z-index” выбрано просто наобум или с каким-то умыслом?

akella | 2. 15 February, 2006

Собсно ответ номер 1:Семантическая корректность в смысле чтения читателями экранов? Если вспомнить о ней, можно использовать псевдоселекторы :after :before и раставить скобки около текста внутри спана, примерно так:

a.tt span:before { content: “(” }
a.tt span:after{ content: “)” }

Для уменьшения интонации можно вместо span использовать small например. Какой именно недостаток в семантике пояснения к тексту ссылки здесь, может я неправильно понял?

Ответ 2: ну в том посте на который я сослался безусловно метод мог быть совсем корректен и семантичен – там юзера вообще не видели того текста и соответственно туда могли писать что угодно. А в данном случае нужно писать осмысленную информацию и я не вижу причин банить пояснение к ссылке. Наверно потому что их нет. Это обычный контент. Все в рамках, имхо. Банят если туда вписать 10 кейвордов и так раз 20 на странице. Здесь же все по смыслу должно быть – иначе, что за прикол юзеру читать ваше семантическое ядро.

Ответ 3: в данном случае важно лишь что 22 меньше чем 23. Оба они больше 0 и меньше 256. Значение з-индекс указывает какой блок должен быть отображен поверх какого. У кого меньше тот и главный. :)

Конкретные значения выбраны исходя из возраста автора поста.

Vladson | 3. 15 February, 2006

По поводу №2 (ИМХО):

В первую очередь это такой-же контент как и любой другой, то что он скрыт до наведения на него мышью не значит что он скрыт совсем а стало быть никаких причин для бана нету.

Если какой-то поисковик будет банить за такое то это его проблемы а не мои, я как чесный дизайнюк делаю дизайн для людей а не для поисковых машин, так что если им что-то не нравится пускай идут “наффик”.

ganges | 4. 15 February, 2006

Насчет семантики, с моей точки зрения там вообще нет проблем – span семантики не несет. стало быть объяснение это просто продолжение ссылки, чем оно и есть. Для скринридеров, опятьже имхо, это только хорошо. – лучше чем без объяснения – оно прочитает LINK – и дальше раскажет о чем этот линк.

По поводу бана – если за такие вещи Гугл и будет банить, то только если туда спам вписывать повторяющийся. Это просто ссылка.

По поводу usability
В твоем примере тултип перекрывает две нижеследующие ссылки и надо делать дополнительное движение. чтобы от него избавиться (Linux FF) ИМХО, в тексте это ОК, (как насчет onfocus :) а в меню – либо отказаться, либо позиционировать тултип в строке со ссылкой, предварительно развинув с помощью line-height строку

akella | 5. 15 February, 2006

2Ganges: Пожалуй ты прав, можно к :hover добавить еще и :focus или как там оно.. :) Но это уже мелочи.

А с координатами нужно играться конечно у меня там неидеально вышло. Вот с календарем гораздо приятнее получилось, и без лишних движений. Наверно нужно больше в сторону сдвигать – в этом секрет успеха.

Tomaz | 6. 15 February, 2006

В Опере 8.5 тултип ведет себя как-то странно: он не исчезает полностью, часть его остается видимой.

akella | 7. 15 February, 2006

Нда, какой то странный глюк оперы :(.
Он проявляется при одновременном использовании z-index и position:absolute;

При убирании з-индекс глюк исчезает, но опять же приходится задавать position:relative для a.tt а не для a.tt:hover. И тут всплывают проблемы с ИЕ… Приходится хакать. Короче говоря надо выпустить ДВА варианта тултипов для разных ситуаций на странице. Странно что опера так странно себя ведет :(.

Завтра сделаю апдейт.

Владимир Яшников | 8. 15 February, 2006

Здесь можно найти ещё несколько интересных примеров.

uggallery | 9. 17 February, 2006

Еще неприятный момент: на скриншоте. Курсор с левого края, тултип — с правого, и не умещается на экране. Но простота — это действительно, сила. Если правильно учесть ограниченность метода. Или сделать вариант с “немножко JavaScript”.

С точки зрения юзабилити, у меня один общий вопрос к любым нестандартным тултипам: насколько их использование вообще оправдано? Но это нужно решать в каждом конкретном случае, отдельно.

akella | 10. 17 February, 2006

Да, спасибо, я и не ожидал.
Пожалуй стоит обезопасивать большими отступами такие “обьекты” :). Спасибо еще раз.

доброход | 11. 18 February, 2006

а не могли бы кинуть ссылку на “непростой” тултип? с кучей JS? Спасибо!

Dmitry | 12. 18 February, 2006

Я тоже как-то занимался аналогичными подсказками http://borr.nm.ru/pub/xml/tocmenu.xml – здесь основной пример. А вообще весь сайт был сделан с упором на подобные подсказки. И еще – есть подозрение, что мой пример не работает в Ие и других сотоварищах, так как кроме mozilla я в глаза вообще никого не видел, зато у меня полупрозрачный фон и скругленные углы :) . Ваш пример должен быть более кросплатформенным.

akella | 13. 19 February, 2006

2 доброход: Вот здесь – Всплывающая подсказка (tooltip) с использованием DOM – более сложный вариант.

А так же не следует забывать о nicetitles (и на русском)

2 Dmitry: спасибо за интересный пример – это наверно наше кодерское будущее… :)

Double | 14. 19 February, 2006

В Opera 8.5.1 глючит пример. Поэтому ниасилил (т.е. дальше читать не стал :)

akella | 15. 20 February, 2006

Я собственно так и написал – что для оперы 8.51 нужен отдельный пример в силу корявости данного броузера в области position:absolute, он никак не может асилить данную простую технику. Как я и написал достаточно убрать z-index и все работает.

Вобщем то Вам проще было написать ниасилил видимо ) чем все-таки асилить сей огромный пост. :)
В любом случае – отличный коммент :))

Ну а во вторых глючит не везде… Потому я и написал что для разных случаев разную технику нужно использовать.

Единственное решение которое я пока вижу – отдавать отдельный ЦСС для ВСЕХ бразуеров кроме Оперы – имхо слишком много чести – все же это не жизненно важный функционал, а прикольная фича – которую пускай видят только обладатели доработанных броузеров :P

CB | 16. 20 February, 2006

Мой вариант:

http://sudoku.org.ua/rus/blog/examples/tt/

akella | 17. 20 February, 2006

По адресу http://cssing.org.ua/examples/csstooltip/index1.html – находится пример для оперы – пришлось пожертвовать отображением тултипов поверх других (тултипистых)ссылок на странице.

Однако если важна поддержка и никак не уйти от оперы…

UGgallery » Tooltips | 18. 20 February, 2006

[…] Tooltips
20 Фев. 2006

Простой тултип или всплывающая подсказка (от cssing)

Без Javascript. Только HTML и CSS.[…]

(v) | 19. 2 March, 2006

Жаваскрипт?! Да почему бы и нет, хватит жить в архаичном мире!

http://www.dustindiaz.com/sweet-titles

akella | 20. 2 March, 2006

Как по мне то каждый выбирает сам :) Не вижу ничего архаичного в неупотреблении джаваскрипта для таких простецких эффектов.

rodem | 21. 10 March, 2006

http://www.bosrup.com/web/overlib/
Собственно использую аж с 2000-го года. 36 кб js – работает везде.

sazuke | 22. 3 April, 2006

все здорово!! только хотел я это применить к выпадающему списку типа

не проходит )) Разбираю css на примерах и спецификацию почитываю )
Может поможет кто ?
p.s. Как предполагаю, нужно искать в направлении прописывания классов для

gordi | 23. 10 April, 2006

Здесь не большое обсуждение:
http://xpoint.ru/forums/internet/html_css/css/thread/36200.xhtml

Blog: Alter World | 24. 18 April, 2006

[…] но себе на заметку возьму и выскажу одно замечание по рецепту Простой тултип или всплывающая подсказка – на мой взгляд там нужного результата можно было добиться проще, главное не забывать про DOM и onmouseover/onmouseout.[…]

pepelsbey | 25. 6 May, 2006

Битая ссылка на Agat’a “К тому же можно вспомнить о поисковой оптимизации и использовать вот этот прием”

Вот новая: http://agat.in/1/css-seo/

Aph1na | 26. 22 June, 2006

Как-то давно прочитала, но только сегодня пришлось воспользоваться. Огромное спасибо, отличный пример.

links for 2006-09-28 | 27. 28 September, 2006

[…] tember 28, 2006 links for 2006-09-28 Filed under: web andyb 6:23 am #
cssing :: Архив :: Простой тултип или всплывающая подсказка
(tags: webdev css)
° […]

Alex | 28. 25 October, 2006

Я думаю, самым корректным и для поисковиков, и для семантики, и для контент-менеджеров будет писать ссылке артибут title, использовать Ваш CSS, а потом javascript’ом для всех A в документе, у которых не пустой title, создать span и положить в него содержимое title’а.
Скриптик на строк 6, я полагаю :)

akella | 29. 26 October, 2006

У меня всегда была какая то легкая антипатия к подобным скриптам ) Я фанат простоты и прозрачности. Но отличная идея – это действительно было бы завершенное и правильное решение. Спасибо!
уже не в этот пост но стоит на досуге таки сделать )

Alex | 30. 30 October, 2006

Вот как – оказывается мне не идет мейл об ответе…
Случайно заметил :)
Именно как фанат простоты и прозрачности я испытываю огромную симпатию к таким маленьким, простым и прозрачным скриптам :)
Могу написать.
Надо будет собраться, да :))

Angel7 | 31. 9 November, 2007

Спасибо, пригодилось!

Ars | 32. 6 December, 2007

И все таки цсс чудесен если не учитывать, что опера 8.х тупит, в 9.х все отлично. Долго искал подходящий способ тултипицо остановился на цсс варианте. Спасибо

Ars | 33. 6 December, 2007

Хотя вру. Опера тупит :)

akella | 34. 6 December, 2007

да, для нее второй вариант лучше, там без залипания =)
Рад что техника вам помогла!

Андрей | 35. 27 March, 2008

все работает что называется “чики-пики”, т.е. без сучка и задоринки. спасибо автору за дельный совет

Михаил | 36. 31 March, 2008

Параллельно с попап-титлом в опере выскакивает ее встроенный титл с ссылкой. Может я чего не понимаю, но такая лажа получается. На мой взгляд, лучше уж проверенным (title=”…”) методом, чем так.

akella | 37. 31 March, 2008

Да, для этого гениального броузера лучше не делать попапы теперь. =)

Nick | 38. 11 April, 2008

проблема с примером статьи – в файрфоксе Flash-объект ставится выше )= чего то не могу побороть

akella | 39. 11 April, 2008

Для позиционирования поверх флеш обьектов нужно указывать им в ХТМЛ параметр wmode=”transparent”

Сандро | 40. 22 April, 2008

#links {position: absolute;}
#links a {display: block; text-decoration: none;}
#links a:hover {}

#links a span {display:none;}
#links a:hover span {display: block; position: absolute; width: 150px; color:#d2d2d2; background:#434343; padding:5px; border:1px solid #999999; margin:10px 0 0 -10px}

HTML

ул. Немецкого к…БЛА БЛА БЛА

Что бы все это заработало в Опере просто уберите top:-10px и left:40px, а позиционируйте marginОМ и все ок!

Данила | 41. 10 August, 2009

ну довольно весомо и ни везде работает, на мой взгляд намного проще можно сделать на js – например как здесь – http://neoprizma.net/2009/08/07/alt/

Андрей | 42. 30 October, 2011

Интересная статья! Кстати если кому интересно есть кросс-браузерный хороший способ на на http://sitemaker.x10.bz/articles.php?id=12

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