Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Подсказки на CSS

May 14th, 2008 | Category: CSS, Дизайн | Автор: Александр

Сегодня увидел один интересный CSS трюк для подсказок, или tooltips. Обычно их используют для ссылок, чтобы показать пользователю какую то дополнительную информацию, перед тем как он на ссылку нажмёт. Есть куча скриптов в интернете, с помощью которых можно сделать очень красивые подсказки, но Alen Grakalic придумал подсказки без джаваскрипта. Только с использованием CSS.

Идея очень простая, но эффективная. Вот маркап:

<a href='#'>Заголовок ссылки <span>Подсказка</span></a>

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

PLAIN TEXT
CSS:
  1. a {
  2.   z-index:10;
  3. }
  4. a:hover {
  5.   position:relative;
  6.   z-index:100;
  7. }         
  8. a span {
  9.   display:none;
  10. }
  11. a:hover span {
  12.   display:block;
  13.   position:absolute;
  14.   float:left;
  15.   white-space:nowrap;
  16.   top:-2.2em;
  17.   left:.5em;
  18.   background:#fffcd1;
  19.   border:1px solid #444;
  20.   color:#444;
  21.   padding:1px 5px;
  22.   z-index:10;         
  23. }

Span мы спрячем, и покажем только когда мышка будет над ссылкой. Тогда сработает цсс селектор a:hover span. Также мы позиционируем a:hover релативно, а a:hover span абсолютно.

Результат можно посмотреть если навести мышку тутА вот и подсказка.

del.icio.us Забобрить!

17 Comments so far

  1. CTAPbIu_MABP May 14th, 2008 09:16

    Элегантно…

  2. Big 40wt Svetlyak May 14th, 2008 09:17

    Супер! Только вот при отключенном CSS смотрится некрасиво.

  3. Гвидон Маляров May 14th, 2008 09:49

    “Только вот при отключенном CSS смотрится некрасиво.”
    хм…по этой же логике если к примеру цветность у монитора отключить еще некрасивше будет.
    какая разумная причина может заставить меня отключить css?

  4. SpirITzzz May 14th, 2008 15:01

    Самое элегантное решение всегда оказывается самым простым, но не столь очевидным :) Спасибо, взял на заметку.

  5. KoLK@ May 14th, 2008 19:43

    Довольно оригмнально. Не встречал еще подобную реализацию..

  6. wiktar May 14th, 2008 23:19

    А у меня в Opera 9.27 (8841) не работает :(

  7. helpix May 16th, 2008 07:41

    Аналогично. Не работает в Opera. При этом на сайте автора, кажись, работает.

  8. touareg May 17th, 2008 18:36

    в опере не работает =(

  9. Смоленский Бродяга May 17th, 2008 19:39

    В опере подсказка появляется и исчезает только если прокрутить экран, чтобы она исчезла из поля видимости ;]
    ps Opera_v9.0

  10. reNeo May 18th, 2008 14:10

    В опере 9.50b2 в обычном режиме не работает, зато работает када я этот пример просмотрел в режиме “чтения новостей” (rss)

  11. reNeo May 18th, 2008 14:13

    Кстати, в этой же Opera9.50b2 на сайте автора робит…

  12. Александр May 18th, 2008 14:42

    ну может какойто css от wordpress-a мешает ;)

  13. darkside May 18th, 2008 17:17

    так ведь нет. в чисто своей html’ке в опере тоже не работает.

  14. Krassus May 26th, 2008 15:52

    Что-то не работает и в IE 7. Как это можно победить?

  15. Игорь May 27th, 2008 17:46

    Потерял Ваш блог в списке закладок( зашёл - а тут столько нового) теперь постоянно буду снова приходить)

  16. Петрович May 28th, 2008 08:50

    хорошо написано и разжёвано. ещё бы один нюанс)))

  17. Dimas June 9th, 2008 08:13

    В Opera не канает. Хотя код вроде тот.
    Я что то слышал про hover какие-то изиминение в были внесены и он только с элементами ссылок работает - ну то-есть a:

Leave a reply