07 июля 200921:22:35CSS 8 комментариев

Всплывающие подсказки средствами CSS

Сегодня мы будем создавать всплывающие подсказки с использованием чистого CSS (Cascading Style Sheets). Подсказки нужны для вывода небольшого блока с текстом, информирующего посетителей об определенном элементе вашего сайта. Чтобы просмотреть пример всплывающей подсказки- наведите на эту Етить колотить! Это же всплывающая подсказка!ссылку.

  1. Первое, что нам понадобится- это элемент, к которому мы прикрутим подсказку- например, ссылка. В документе HTML вставим строку:
    <a href="#" class="tooltip"><span>а это текст подсказки</span>это элемент</a>
  2. При наведении мыши на наш созданный элемент без помощи средств CSS ничего происходить не будет. В style.css или прямо в документе HTML между тегами style создайте стили:
    .tooltip { position:relative; z-index:24; }
    .tooltip span { display:none;}
    .tooltip:hover {z-index:25;}
    .tooltip:hover span {
    display:block;
    position:absolute;
    width:120px;
    top:25px;
    left:20px;
    background-color:#FCFBDC;
    border:1px solid #333333;
    padding:5px;
    font-size:11px;
    color:#333333;
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }

В результате получается а это текст подсказкиэто элемент. Можно подредактировать цвет, размер, шрифт- достаточно простых знаний CSS.
———
Быстрое и качественное создание сайта в Одессе. Проблемы со связью? Вам поможет аутсорсинг ит- методы снижения общей стоимости владения информационной системой. Новая акция- купив garmin gps ты получаешь ноутбук!

(средняя оценка 4.11 из 5)
Просмотров: 4,423
Понравилась статья? Подпишись, чтобы не пропустить другие

Другие записи

Комментарии

  1. Антон 29.12.2009 14:47 [цитировать]

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

  2. Антон 29.12.2009 14:50 [цитировать]

    Кроме того в опере после отображения подсказки остается линия.
    В эксплорере подсказки не отображаются вообще.

  3. Марк 23.01.2010 23:41 [цитировать]

    Незнаю как у тебя но у меня в ie и опере все норм отображается!!! Может ты че не так зделал!!!

  4. Везде всё работает и в IE и в OPERA и в FIREFOX всё норм

  5. evlebedev 09.02.2010 23:20 [цитировать]

    В ie глюк со слоями.
    Если они уже были использованы - то подсказка показывается под слоем. 24 слой под 3. Вот такая херня.

  6. evlebedev 15.02.2010 17:51 [цитировать]

    В ie глюк со слоями.
    Если они уже были использованы - то подсказка показывается под слоем. 24 слой под 3. Вот такая херня.

    Рашилось когда убрал нумерацию слоев (z-index:25;)

  7. доброжелатель) 19.04.2010 07:43 [цитировать]

    внимание! в эксплорере 6 весь дизайн данного сайта глючит.

  8. Спасибо большое!!!!

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





Самое главное

  • О нём

    -О чём он?

    -О создании stand- alone блога с нуля.

    -А оно вам надо?

    -Надо

    -Почему?

    Читать далее

  • Теги

  • Календарик

    Сентябрь 2010
    Пн Вт Ср Чт Пт Сб Вс
    « Дек    
     12345
    6789101112
    13141516171819
    20212223242526
    27282930  
  • Комментарии

  • Щебетанье