views:

44

answers:

1

Hi all, 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

A: 

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.

belugabob
I need to have an image and a text in each one, so I guess that i need it styled, i also added a div to contain each link and a tooltip, i think that would help a bit if i'm not mistaken, it now looks like this: <div class="tool_container"> <a class="channels" href="#"><img src="path" alt="" /></a> <div class="test">this is a tooltip</div> </div>
Naruto
In both of your code examples, the image is in the link, not in the tooltip - are you sure that the tooltip has to include an image?
belugabob
oh yea, that's cause the images will be dynamic and content managed, and the tooltip div will contain another image and description about the image in the link ...
Naruto
Your code worked perfectly fine, i just had to add the file "jquery.tools.min.js", and what really fixed the whole issue was the (.find) command, for it solved the problem of the data being dynamically added ... thank you so much for the help ...
Naruto
Glad I could help - would you mind accepting the answer?
belugabob