всплывающие мини-экраны при наведении курсора мыши

Question

Я не могу понять, как сформулировать этот вопрос, если честно.:/

Но я пытаюсь добиться следующего эффекта:

http://zack.scudstorm.com/example.png

Мне было интересно, может ли кто-нибудь здесь помочь мне понять, как добиться этого эффекта, как показано на изображении?:/

Эффект, как видно на изображении, заключается в том, что когда я навожу курсор на изображение или что-то еще, к чему я привязываю событие «onmouseover», отображается «всплывающее окно», показывающее текст и другую информацию, которую мне может понадобиться отобразить.

Заранее спасибо!
-Зак

P.S.Извините за пример из WoW;это единственное, о чем я мог подумать, пытаясь описать этот эффект.

Answer 1

Вот псевдокод, с которого можно начать:

привязать событие наведения мыши к ссылке – в jquery: $('a.popup').mouseover(function(){ /* code here */ });

в событии найти положение мыши
создайте (или используйте уже созданный) div для хранения вашей информации
поместите div непосредственно в элемент body, чтобы вы могли абсолютно позиционировать его
используйте позицию мыши, которую вы нашли ранее, чтобы расположить свой div на мыши (или относительно мыши)

привязать событие отвода мыши к ссылке
в этом случае скрыть абсолютно позиционированный информационный div

примените красивые стили в таблице стилей :)

Вот и все.Это не так уж и сложно — если вы используете jquery, все это есть в документации.

Надеюсь это поможет

Answer 2

Ознакомьтесь с любым из множества плагинов подсказок jQuery.

qTip вроде неплохо.

Answer 3

В MooTools также есть несколько полезных советов по работе с мышью:

Документация MooTools:Советы Класс

Демо/Обучение