Jquery Tooltip and CSS

Question

Don't worked tooltip after change in select box $('select[name="tour_name"]').change... and use of id #residence_name, what is causes this problem and how can fix it?

Example: 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');
})

Answer 1

You have to move the event handlers inside the $(..).change function, because .tool_tip doesn't exist yet when you run the code.

$('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');
    })
});