How to open separate tooltip with same class in JQuery

Question

i am learning JQuery and for this i did this work. I am facing problem when i mouse hover on thumbnail all tool tip is opening, i wanted to open only related tooltip, I don't want to use multiple classes for this i want to do this work with same classes. Is there any way to do this work with out taking separate classes for every thumbnail?

Here is the link: http://shahfahad.com/jquery/hide-show.html

enter image description here check attached screenshot

Answer 1

Try this script

<script>
$(document).ready(function(){
    $(".model").css("display","none");  
        $(".hide").click(function(){
        $(".show").closest("ul").removeClass("showing");
        $(".model").hide();

    }); 

    $(".show").mouseover(function(){

        if(!$(this).closest("ul").hasClass("showing")){
        $(this).closest("ul").addClass("showing");
        $(this).next(".model").show(); 
        }
    });

});

fiddle