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

Смотрите, стандартная подсказка делается при помощью добавления в ссылку обычного тайтла:

Код (будьте бдительны, кавычки в блоге делаются «неправильными»):

<a href=«gb.html» title=»не для спама! удалю-забаню-прокляну»>

</a>

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

Но добавим чуть кода в css, добавим класс для ссылки и еще немного магии и можем наблюдать уже мгновенную подсказку для ссылки:

Белый текст на черном фоне, как по мне, подходит лучше всего. А округление делает решение симпатичным.

Как это сделать.

В css-файл сайта нужно вставить следующий кодВ новом окне откроется код для вставки в css-стиль
для такого же эффекта всплывающей подсказки
(наведите мышку на ссылку), так называемый тултип, tooltip (по ссылке файл css), а ссылки оформляем так:

<a class=»tooltip» href=»gb.html»>Гостевая

<span>не для спама! удалю-забаню-прокляну</span>

</a>

Навели мышку на ссылку? Значит, увидели двухэтажную подсказку =) Для блога я взял такой же код, но изменил значение top до -45.

Напоследок я хотел бы напомнить, что эти забавы всё-такие для web, а не для wap.

Теперь ищу такое же изящное решение для выделения обычного текста.

Пока что придумал только некрасивый костыльНадо, чтобы текст выделялся как ссылка (наведите мышку на слово «костыль»).

Удачи в сайтострое.

Оцени статью: