[handler]

Здравствуйте!
Задача: всплывающее окно подсказок при наведении курсора на элемент (в моем случае это anchor, но может быть и div и img). Для anchor есть свойство title, но оно не подходит по двум причинам:
1. таймаут (пропадает через время)
2. не поддерживает форматированный текст

Моя реализация:
Для anchor в onmouseover создаем div-подсказку, в onmouseout - удаляем.
Вроде все красиво, только подсказка видна пока курсор над anchor'ом - если курсор сместить на тот же div(как в стандартных tooltip'ах), то подсказка исчезнет. Про анимацию (всплывание и сворачивание подсказки) я вообще молчу.

Схем реализации в интернет много - но все они громмоздкие. Если все так сложно с подсказками - то я оставлю свою, если Вы знаете как просто (в разумных пределах) реализовать подсказку - буду весьма признателен Вам.
Заранее благодарен.
Алексей.
Днепр

[redreem]

я пользуюсь этим решением:

var tooltip=function(){
	var id = 'tt';
	var top = 50;
	var left = 50;
	var maxw = 500;
	var speed = 10;
	var timer = 20;
	var endalpha = 95;
	var alpha = 0;
	var tt,t,c,b,h;
	var ie = document.all ? true : false;
	return{
		show:function(v,w){
			if(tt == null){
				tt = document.createElement('div');
				tt.setAttribute('id',id);
				t = document.createElement('div');
				t.setAttribute('id',id + 'top');
				c = document.createElement('div');
				c.setAttribute('id',id + 'cont');
				b = document.createElement('div');
				b.setAttribute('id',id + 'bot');
				tt.appendChild(t);
				tt.appendChild(c);
				tt.appendChild(b);
				document.body.appendChild(tt);
				tt.style.opacity = 0;
				tt.style.filter = 'alpha(opacity=0)';
				document.onmousemove = this.pos;
			}
			tt.style.display = 'block';
			c.innerHTML = v;
			tt.style.width = w ? w + 'px' : 'auto';
			if(!w && ie){
				t.style.display = 'none';
				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
				t.style.display = 'block';
				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
			h = parseInt(tt.offsetHeight) + top;
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(1)},timer);
		},
		pos:function(e){
			var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
			var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
			tt.style.top = (u ) + 'px';
			tt.style.left = (l + left) + 'px';
		},
		fade:function(d){
			var a = alpha;
			if((a != endalpha && d == 1) || (a != 0 && d == -1)){
				var i = speed;
				if(endalpha - a < speed && d == 1){
					i = endalpha - a;
				}else if(alpha < speed && d == -1){
					i = a;
				}
				alpha = a + (i * d);
				tt.style.opacity = alpha * .01;
				tt.style.filter = 'alpha(opacity=' + alpha + ')';
			}else{
				clearInterval(tt.timer);
				if(d == -1){tt.style.display = 'none'}
			}
		},
		hide:function(){
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
		}
	};
}();

CSS-классы:

#tt {position: absolute; display: block; }
#tttop {display:block; height:5px; margin-left:5px; overflow:hidden; }
#ttcont {display:block; padding:2px 12px 4px 12px; margin-left:5px; background:#DCDAE5;border:1px solid #D3D1DD; color: #222;  font-size: 12px; line-height: 15px; z-index: 10000;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;box-shadow: 2px 2px 1px #888;}
#ttbot {display:block; height:5px; margin-left:5px; overflow:hidden; }
#ttcont p {}

ну сами там свойства поменяете как надо...

пример кода:

<div onMouseOver="tooltip.show('<p>Подсказка</p>');" onMouseOut="tooltip.hide();">123</div>

форматирование поддерживается (свои CSS-классы никто добавлять не запрещает), громоздким решение не считаю.

[handler]

Спасибо, я уже видел этот пример - не могу понять, зачем там 3 div'a ?

[redreem]

а я не заморачиваюсь. весит мало, работает на ура, а это главное.

[handler]

Спасибо за совет - действительно, лучше сосредоточиться на дальнейшем развитии проекта, чем копаться в деталях. Может, позже разберусь.