Question

我是JQuery的新手，我有一个动态的侧面菜单（链接有类“频道”），当鼠标移过侧面菜单中的任何链接时，我想要一个有图像的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>

如果有人能帮我解决这个问题，我真的很感激。

由于

Answer 1

如果工具提示包含纯文本，那么您可以考虑使用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();
        }
    );
}

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

实际的标记和CSS必须进行调整以适合您的目的，但我相信您会明白这一点。

帮助JQuery工具提示

1 个答案: