Всплывающие подсказки

Бывает, что в тексте статьи необходимо сделать всплывающую подсказку по клику на слово или картинку. Вот один из способов, как можно реализовать данную функцию.
Итак, сделаем ссылку блок с информацией, которая будет выводиться во всплывающей подсказке.

Оформим:

Класс show — оформление блока. Если этому блоку добавить класс hide то он будет скрыт.
Теперь сам скрипт:

При клике по ссылке вызывается функция viewTooltip(). Вычисляются координаты ссылки и блок позиционируется под ссылкой: elem.offsetTop — координаты ссылки от верхней части экрана, elem.offsetLeft — координаты ссылки от левой стороны ссылки. Т.к. мы хотим чтобы блок выводился под ссылкой, надо прибавить elem.offsetTop размер строки (ссылки): (elem.offsetTop + $elTop) + ‘px’.

Вот что у нас получилось DEMO

Пример полностью:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *