Question

I’m new to JQuery, I have a dynamic side menu (links have the class “channels”) and when the mouse goes over any of the links in the side menu, I want a div that has an image and some text to appear next to each link, I’ve tried using many plugins but nothing worked until now.

Here is the html for the side menu, I want each div with the class “tooltip” to appear once the mouse is over

<a class="channels" href="#"><img src="image path" alt=""  /></a>
<div class="tooltip">this is a tootltip div to the first channel</div>

     <div class="sep"><!-- --></div>

<a class="channels" href="#"><img src="image path" alt=""  /></a>
<div class="tooltip">this is a tootltip div to the second channel</div>

     <div class="sep"><!-- --></div>

<a class="channels" href="#"><img src="image path" alt=""  /></a>
<div class="tooltip">this is a tootltip div to the third channel</div>

I would really appreciate it if someone could help me solve this problem.

Thanks

Answer 1

If the tooltips contain purely text, then you could consider using the tooltips that are built in to HTML…

<a class="channels" href="#" title="this is a tootltip div to the first channel"><img src="image path" alt=""  /></a> 

 <div class="sep"><!-- --></div> 

<a class="channels" href="#" title="this is a tootltip div to the second channel"<img src="image path" alt=""  /></a> 

 <div class="sep"><!-- --></div> 

<a class="channels" href="#" title="this is a tootltip div to the third channel"><img src="image path" alt=""  /></a> 

If you need to have the tooltips styled in some way, then let me know and I’ll attempt to supply a solution for that approach.

UPDATE:

As the tooltip needs to include more than simple text, this is the kind of approach that you need…

<div class="tool_container"> 
    <a class="channels" href="#"><img src="path" alt="" /></a> 
    <span class="tooltip">tooltip<img src="path" alt="tooltipImage#1" /></span> 
</div>
<div class="tool_container"> 
    <a class="channels" href="#"><img src="path" alt="" /></a> 
    <span class="tooltip">another tooltip<img src="path" alt="tooltipImage#2" /></span> 
</div>

.tool_container
{
    position: relative;
}

.tooltip
{
    position absolute;
    top: -10px;
    border: 1px solid #808080;
    background-color: Yellow;
    display: none;
}

$(document).ready(function() {
    $(".tool_container").hover(
        function(){
            $(this).find(".tooltip").show();
        },
        function(){
            $(this).find(".tooltip").hide();
        }
    );
}

Note the use of for the tooltips, to prevent them from being the full width of the page.

The actual markup and CSS will have to be tweaked to suit your purposes, but I’m sure that you get the idea.