JQuery工具提示的帮助

我是JQuery新手，我有一个动态的侧菜单（链接有类“channels”），当鼠标滑过侧菜单中的任何链接时，我想要一个div，在每个链接旁边都显示一个图像和一些文本，我尝试过使用许多插件，但到目前为止都没有效果

这是侧菜单的html，我希望鼠标一过，每个div都会显示“tooltip”类

<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>

这是到第一个通道的tootltip div
这是到第二个通道的tootltip div
这是到第三个通道的tootltip div

如果有人能帮我解决这个问题，我将不胜感激

---

谢谢

如果工具提示包含纯文本，那么可以考虑使用内置到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> 

如果您需要以某种方式设置工具提示的样式，请让我知道，我将尝试为该方法提供解决方案

更新：

由于工具提示需要包含的不仅仅是简单的文本，这是您需要的方法

<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();
        }
    );
}

工具提示
另一个工具提示
.工具容器
{
位置：相对位置；
}
.工具提示
{
绝对位置；
顶部：-10px；
边框：1px实心#808080；
背景颜色：黄色；
显示：无；
}
$（文档）.ready（函数（）{
$（“.tool_container”）。悬停(
函数（）{
$（this.find（“.tooltip”）.show（）；
},
函数（）{
$（this.find（“.tooltip”）.hide（）；
}
);
}

请注意工具提示的使用，以防止它们成为页面的全宽

---

实际的标记和CSS将不得不调整以适合您的目的，但我确信您会得到这个想法。

< P>如果工具提示包含纯文本，那么您可以考虑使用内置到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> 

如果您需要以某种方式设置工具提示的样式，请让我知道，我将尝试为该方法提供解决方案

更新：

由于工具提示需要包含的不仅仅是简单的文本，这是您需要的方法

<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();
        }
    );
}

工具提示
另一个工具提示
.工具容器
{
位置：相对位置；
}
.工具提示
{
绝对位置；
顶部：-10px；
边框：1px实心#808080；
背景颜色：黄色；
显示：无；
}
$（文档）.ready（函数（）{
$（“.tool_container”）。悬停(
函数（）{
$（this.find（“.tooltip”）.show（）；
},
函数（）{
$（this.find（“.tooltip”）.hide（）；
}
);
}

请注意工具提示的使用，以防止它们成为页面的全宽

---

实际的标记和CSS必须根据您的目的进行调整，但我相信您会明白的。

我需要在每个标记和CSS中都包含一个图像和一个文本，因此我想我需要对其进行样式化，我还添加了一个div来包含每个链接和工具提示，如果我没有弄错的话，我想这会有点帮助，现在看起来是这样的：这是你的两个代码示例中的工具提示，图像在链接中，而不是在工具提示中-你确定工具提示必须包含图像吗？哦，是的，这是因为图像将是动态的和内容管理的，并且工具提示div将在链接中包含另一个图像和关于图像的描述…你的代码rked非常好，我只需添加文件“jquery.tools.min.js”，而真正解决整个问题的是（.find）命令，因为它解决了动态添加数据的问题…非常感谢您的帮助…我需要在每一个中都有一个图像和一个文本，所以我想我需要它的样式，我还添加了一个div来包含每个链接和一个工具提示，如果我没有弄错的话，我想这会有点帮助，现在看起来是这样的：这是两个代码示例中的工具提示，图像在链接中，而不是在工具提示中-您确定工具提示必须包含图像吗？哦，是的，这是因为图像将是动态的，并且内容管理的，并且工具提示div将包含另一个图像和关于链接中图像的描述…您的代码工作正常很好，我只需要添加文件“jquery.tools.min.js”，真正解决整个问题的是（.find）命令，因为它解决了动态添加数据的问题…非常感谢您的帮助。。。