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

• стили элемента

1 #ns_tt{
2 position: absolute;
3 border: solid #AAAAAA 1px;
4 background-color: #DDDDDD;
5 font-family: Tahoma, sans-serif;
6 font-size: 11px;
7 line-height: 16px;
8 padding: 2px 5px;
9 overflow: hidden;
10 margin: 25px 0px 0px 5px;
11 }

Создаём js файл.
Вот тут самое интересное.
Создаём переменные отвечающие за левую и верхнюю позицию подсказки:

var l = 0, t = 0

Проверяем браузер. Если это Internet Explorer, то он будет понимать document.all и соответственно у него другие понятия о событиях и значениях которые они возвращают.

var IE = document.all?true:false

При движении мыши запускаем функцию, которую опишем ниже:

document.onmousemove = getMouseXY

Создаём элемент div который у нас будет являться подсказкой:

var ns_tt = document.createElement(«div«)

А эта функция будет изменять положение подсказки относительно положения курсора мыши:

function getMouseXY(e) {
if (IE) {
l = event.clientX + document.body.scrollLeft
t = event.clientY + document.body.scrollTop
}
else {
l = e.pageX
t = e.pageY
}
ns_tt.style.left = l + «px«
ns_tt.style.top = t + «px«
return true
}

Как вы видели мы проверяли наличие браузера IE. Дело в том что IE во-первых: положение курсора мыши понимает из объекта event в частности его значений clientX и clientY; во-вторых: координаты мыши отсчитываются от левого верхнего угла окна браузера, а когда пользователь использует прокрутку то в IE координата смещается, чего нет в других браузерах.

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

function AddTT(tt_text){
document.body.appendChild(ns_tt)
ns_tt.id = «ns_tt«
ns_tt.innerHTML = tt_text
}

Последняя функция удаляет подсказку:

function RemoveTT() {
document.body.removeChild(document.getElementById(«ns_tt«))
}

• весь JavaScript

1 var l = 0, t = 0
2 var IE = document.all?true:false
3 document.onmousemove = getMouseXY
4 var ns_tt = document.createElement(«div«)
5 function getMouseXY(e) {
6 if (IE) {
7 l = event.clientX + document.body.scrollLeft
8 t = event.clientY + document.body.scrollTop
9 }
10 else {
11 l = e.pageX
12 t = e.pageY
13 }
14 ns_tt.style.left = l + «px«
15 ns_tt.style.top = t + «px«
16 return true
17 }
18
19 function AddTT(tt_text){
20 document.body.appendChild(ns_tt)
21 ns_tt.id = «ns_tt«
22 ns_tt.innerHTML = tt_text
23 }
24
25 function RemoveTT() {
26 document.body.removeChild(document.getElementById(«ns_tt«))
27 }

используем всё следующим образом:

<div onmouseover=»AddTT(‘это наша подсказка,<br /> в которой мы можем использовать <b>html</b>’);» onmouseout=»RemoveTT();»>
Текст, картинка, блок, то что требует подсказки </div>

Тестировано в: IE 6, IE 7, Opera 9.02, Firefox 2.0.0.1

первоисточник и пример: http://seleckis.lv/wp-content/uploads/File/scripting/ns_tooltip.html

p.s. а вы знаете, что уже прошла половина лета? (: