Question

I created a tooltip and i have problem with it, i want:

When that mouseenter on hi show value into next div it value hi
When that mouseenter on hello show value into next div it value hello

But in following code, when that mouseenter on each tow hi & hello showing value hello,

How can fix it?

var tip = $('.tool_tip').closest('li').find('div').clone();
$('.tool_tip').mouseenter(function () {
    var $this = $(this),
    $div = '.'+$this.closest('li').find('div').attr('class');
    $(this).attr('title', '');
    $($div).hide().fadeIn('slow').children('.tipBody').html(tip);
}).mousemove(function (e) {

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

}).mouseleave(function () {
    $('.tooltip').hide();
})

Example: http://jsfiddle.net/dege4/2/

Answer 1

var tip = $('.tool_tip').closest('li').find('div').clone();
$('.tool_tip').mouseenter(function () {
    var $this = $(this),
    $div = $this.closest('li').find('div');
    $(this).attr('title', '');
    $div.hide().fadeIn('slow');
}).mousemove(function (e) {

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

}).mouseleave(function () {
    $('.tooltip').hide();
})

works @ http://jsfiddle.net/dege4/5/