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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем sasha465, 13 дек 2011.

  1. sasha465

    sasha465 Well-Known Member

    Регистрация:
    29 мар 2009
    Сообщения:
    69
    Симпатии:
    0
    Здравствуйте! Вот решил сделать всплывающую подсказку. Собственно вот код:
    Код (Text):
    $.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");
    Так вот если начать быстро двигать мышкой около элемента то появится множество подсказок и исчезать явно будут не все. Отсюда вопрос как это исправить????
     
  2. sasha465

    sasha465 Well-Known Member

    Регистрация:
    29 мар 2009
    Сообщения:
    69
    Симпатии:
    0
    Нашел решение. Всего лишь нужно было в первый параметр-функцию обработчика события hover поместить проверку на наличие элемента подсказки в DOM страницы и если нету то вывести подсказку:
    Код (Text):
    $.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();
    })
    })
    }
     
  3. sasha465

    sasha465 Well-Known Member

    Регистрация:
    29 мар 2009
    Сообщения:
    69
    Симпатии:
    0
    Теперь не могу сделать перемещение подсказки за курсором мыши. Странно, но при возникновении события mousemove вместе же с ним возникает и mouseout, хотя курсор за границу не вышел. Получается так, что подсказка при движении то появляется то исчезает. Причем если mousemove убрать, то проблема исчезает и подсказка висит в том месте где появилась пока не уберем курсор.
    Код (Text):
    $.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 и вместо:
    Код (Text):
    $("#tip").css({top:event.pageY+'px',left:event.pageX+'px'});
    надо сделать так:
    Код (Text):
    $("#tip").css({top:event.pageY-20,left:event.pageX+20});
     
Загрузка...
Похожие Темы - Всплывающая Подсказка
  1. DNT
    Ответов:
    5
    Просмотров:
    3.421
  2. Баламут
    Ответов:
    16
    Просмотров:
    8.737

Поделиться этой страницей