Jquery Tooltip и CSS - PullRequest
Новая
       12

Jquery Tooltip и CSS

0 голосов
/ 24 сентября 2011

Не сработала всплывающая подсказка после изменения в поле выбора $('select[name="tour_name"]').change... и использования идентификатора #residence_name, что является причиной этой проблемы и как ее можно исправить?

Пример: http://jsfiddle.net/7Arye/

$('select[name="tour_name"]').change(function () {
    var val = $(this).attr('value');
    $('#residence_name').empty().append('<li id="' + val + '"><a href="" class="tool_tip" title="ok">' + val + '</a><div class="in_tooltip">'+val+'</div></li>');

});
///// Toltip //////////////////////////////////////////////////////
$('.tool_tip').mouseenter(function () {    
    var tip = $(this).closest('li').find('div').clone();
    //alert(tip)
    $(this).attr('title', '');
    $('.tooltip').hide().fadeTo(300, 0.9).children('.tipBody').html(tip);
    // $('.tooltip', this).stop(true, true).fadeIn('slow');
}).mousemove(function (e) {

    $('.tooltip').css('top', e.pageY + 10); // mouse follow!
    $('.tooltip').css('left', e.pageX + 20);

}).mouseleave(function () {
    $('.tooltip').hide();
    //$('.tooltip', this).stop(true, true).fadeOut('slow');
})

1 Ответ

1 голос
/ 24 сентября 2011

Вы должны переместить обработчики событий в функцию $(..).change, потому что .tool_tip еще не существует, когда вы запускаете код. 

$('select[name="tour_name"]').change(function () {
    var val = $(this).attr('value');
    $('#residence_name').empty().append('<li id="' + val + '"><a href="" class="tool_tip" title="ok">' + val + '</a><div class="in_tooltip">'+val+'</div></li>');

    ///// Tooltip //////////////////////////////////////////////////////
    $('.tool_tip').mouseenter(function () {    
        var tip = $(this).closest('li').find('div').clone();
        //alert(tip)
        $(this).attr('title', '');
        $('.tooltip').hide().fadeTo(300, 0.9).children('.tipBody').html(tip);
        // $('.tooltip', this).stop(true, true).fadeIn('slow');
    }).mousemove(function (e) {

        $('.tooltip').css('top', e.pageY + 10); // mouse follow!
        $('.tooltip').css('left', e.pageX + 20);

    }).mouseleave(function () {
        $('.tooltip').hide();
        //$('.tooltip', this).stop(true, true).fadeOut('slow');
    })
});
...