Всплывающая Подсказка

sasha465

Well-known member
29.03.2009
69
0
#1
Здравствуйте! Вот решил сделать всплывающую подсказку. Собственно вот код:
Код:
$.fn.term=function(text){
return this.hover(function(event){
$('<div id="tip">'+text+'</div>').css({
position:'absolute',
background:'#999',
left:event.pageX+20,
top:event.pageY-20,
cursor:'pointer',
display:'none'}).appendTo('body').fadeIn();
},function(event){
$("#tip").fadeOut(1500,function(){ $(this).remove();
})
})
}
То есть при наведении мыши возникает div с заданными параметрами. Вот так подключаю затем:
$("#info_login").term("helo");
Так вот если начать быстро двигать мышкой около элемента то появится множество подсказок и исчезать явно будут не все. Отсюда вопрос как это исправить????
 

sasha465

Well-known member
29.03.2009
69
0
#2
Нашел решение. Всего лишь нужно было в первый параметр-функцию обработчика события hover поместить проверку на наличие элемента подсказки в DOM страницы и если нету то вывести подсказку:
Код:
$.fn.term=function(text){
return this.hover(function(event){
if(!($('*').is('div#tip'))){
$('<div id="tip">'+text+'</div>').css({
position:'absolute',
background:'#999',
left:event.pageX+20,
top:event.pageY-20,
cursor:'pointer',
display:'none'}).appendTo('body').fadeIn();
}
},function(event){
$("#tip").fadeOut(1500,function(){ $(this).remove();
})
})
}
 

sasha465

Well-known member
29.03.2009
69
0
#3
Теперь не могу сделать перемещение подсказки за курсором мыши. Странно, но при возникновении события mousemove вместе же с ним возникает и mouseout, хотя курсор за границу не вышел. Получается так, что подсказка при движении то появляется то исчезает. Причем если mousemove убрать, то проблема исчезает и подсказка висит в том месте где появилась пока не уберем курсор.
Код:
$.fn.term=function(text){
this.live("mouseover",function(event){
if(!($('*').is('div#tip'))){
$('<div id="tip">'+text+'</div>').css({
position:'absolute',
background:'#FC6',
//left:event.pageX+20,
//top:event.pageY-20,
cursor:'pointer',
display:'none'}).appendTo('body').fadeIn();
}

});
this.live("mousemove",function(event){
$("#tip").css({top:event.pageY+'px',left:event.pageX+'px'});
});
this.live("mouseout",function(event){
$("#tip").fadeOut(1000,function(){ $(this).remove();
})
});	 
}
Добавлено: Проблему решил))) Я тут как псих сам себе объясняю получается)))
Оказалось баг с css и вместо:
Код:
$("#tip").css({top:event.pageY+'px',left:event.pageX+'px'});
надо сделать так:
Код:
$("#tip").css({top:event.pageY-20,left:event.pageX+20});