Применение класса show/hide для каждого div с различным контентом

Question

Это, вероятно, простой вопрос, но, попробовав несколько методов, мне нужен совет.

У меня есть некоторые divs, которые, когда вы наводите на них курсор, покажет другой div (действующий как всплывающая подсказка) с различным содержимым для каждого div. JsFiddle, который я привел, показывает пример этого на красном div. То, что я пытаюсь достичь через jQuery, - это когда вы наводите курсор на любое другое div-шоу, которое разделяет контент.

На данный момент у меня есть 2 divs (синий и красный), и вы можете использовать его только для работы с красным с предоставленным jQuery. Как это будет работать для нескольких div?

Я бы легко использовал плагин всплывающей подсказки, но я использую этот пример в плагине пыльников, и они сильно конфликтуют с подсказками внутри слайдера.

http://jsfiddle.net/DeRx8/1/

$('.red').hover(function() { 
     $(".tooltip").fadeIn(250); 
    }, function() { 
     $(".tooltip").fadeOut(250); 
    }); 

Если кто-то может направить меня, с чего начать, что было бы здорово.

Благодаря

PS * Я буду иметь более 10 дивы красный, bluc, розовый, зеленый ЭСТ ..

Answer 1

Вы можете сделать это

$(document).ready(function() { 
    $('.red,.blue').hover(function() {   
     $(this).next(".tooltip").fadeToggle(250); 
    }); 
}); 

http://jsfiddle.net/Sq5nP/

Если вы хотите поместить ю е подсказка с помощью CSS вы можете использовать прилегающий селектор + если ваша подсказка всегда будет следующий братом

.red+.tooltip { 
    display:none; 
    background-color:#993; 
    width:50px; 
    height:50px; 
    position:absolute; 
    right:60px; 
    top:40px; 
} 
.blue+.tooltip { 
    display:none; 
    background-color:blue; 
    width:50px; 
    height:50px; 
    position:absolute; 
    right:170px; 
    top:10px; 
} 

http://jsfiddle.net/yyrp7/

Answer 2

С несколькими селектором

$(document).ready(function() { 
    $('.red, .blue').hover(function() { 
     $(".tooltip").fadeIn(250); 
    }, function() { 
     $(".tooltip").fadeOut(250); 
    }); 
}); 

Demo Fiddle

Answer 3

вы можете до

$(document).ready(function() { 
$('.red,.blue').hover(function() { 
    $(this).next(".tooltip").fadeIn(250); 
}, function() { 
    $(this).next(".tooltip").fadeOut(250); 
}); 
});  

http://jsfiddle.net/DeRx8/3/
UPDATE

$(document).ready(function() { 
$('.red,.blue').hover(function() { 
    var left=$(this).offset().left+$(this).width()-40; 
    $(this).next(".tooltip").css("left",left).fadeIn(250); 
}, function() { 
    $(this).next(".tooltip").fadeOut(250); 
}); 
});  

положение .tooltip
http://jsfiddle.net/DeRx8/5/