Javascript 动态jQuery工具提示

我有一个非常具体的要求。我一直在浏览其他一些帖子，但找不到一个明确的答案，所以非常感谢您的帮助

我希望得到一个jQuery工具提示，当鼠标悬停时，它是一个文本居中的普通工具提示。但是，单击图元时，工具提示向左加宽（文本将保持居中，以便在工具提示中心向左移动时显示为向左移动），并在工具提示下方滑出一个下拉菜单。我仍在犹豫是否需要加宽，但我希望能够有点击下拉菜单

在此方面的任何和所有帮助都将不胜感激。谢谢

编辑***我写了一些我无法真正开始工作的代码。现在我只是想用div来解决这个问题，希望我可以用一个工具提示形状来代替“工具提示”div，而不仅仅是一个方框，但是我想在我担心这个问题之前让它工作起来。如对以下代码有任何帮助，我们将不胜感激。谢谢

我为缺少缩进和其他东西提前道歉，我不知道为什么我的代码不能很好地复制/粘贴到这里

HTML:

jQuery

$(document).ready(function() {

// tooltip hover
$("div.topIconNew").hover(
    function(){
        $("div.topTip").show();
    }
);        

//tooltip widening and dropdown menu

$("div.topIconNew").click(
    function(){
        //permanent tooltip
        $("div.topTip").show();
    },    
    function(){
        //widen tooltip
$("div.topTip").animate({width:200},"fast");
    },        
    function() {
        //show dropdown
        $("div.topDrop").slideDown(300);
    }
);
$("div.wrapper").click(
    function(){
        //hide dropdown (hide simultaneously)
        $("div.topDrop").hide();
    }
    function(){
        //hide tooltip (hide simultaneously)
        $("div.topTip").hide();
    {        
);

}); 

---

非常感谢您的任何帮助。谢谢

假设我从头开始构建

可以绝对定位的下拉菜单类

可以绝对定位的工具提示类

这些类必须是自包含的，例如下拉列表应处理所有绑定事件等。。。首先，我将在触发工具提示的任何对象上挂起一个悬停元素，然后定位工具提示并设置文本。然后，我会将onClick事件附加到同一个项目上，并在其中：

将工具提示标记为“悬停将不再销毁它”（可能改用外部单击文档）

在工具提示对象上运行动画，既将x位置设置为x-200（例如），也将宽度设置为+200（

.animate（{x:'-=200'，宽度：'+=200'））

）

我会在动画上附加一个事件侦听器，因此在动画结束时，我会附加相对于工具提示的下拉列表

如果您单独编写它们，那么将它们绑定在一起应该很容易。在这样一个系统中，你只需关注主要的事件：

鼠标悬停在工具提示项上

鼠标悬停在项目上以显示工具提示

点击物品弹出永久性的工具提示和标志

附加下拉列表

响应下拉事件

---

谢谢你的帮助！我感谢你的指导。我对jQuery有点陌生，所以这将是一次很好的学习经历。祝我好运，哈。如果你有任何其他问题，请随时发布。如果您需要更深入的内容，我会使用jsfiddle.net来共享代码（另外，它只是一个处理javascript/jquery的酷工具）。我很感激你的建议。我已经报名参加了。你知道一个简单的工具提示和下拉列表吗？我一直比较擅长学习如何处理示例，以了解发生了什么以及如何使事情正常运行。jsfiddle是一个整洁的工具，非常适合于评论（不能容纳太多代码）和帮助人们回答您的问题。尽可能使你的问题和答案保持独立，包括代码（正如你在这个问题中所做的那样）。如果有人必须访问jsfiddle.com才能理解您的问题或答案，那么它可能并不像应该的那样精练。这有助于更好地理解上下文，但尽量直接发布相关片段。好的，谢谢Merlyn。不管怎样，我认为JSFIDLE工具仍然非常整洁，因为它使我能够在一个窗口中编辑所有代码，同时查看结果。。。减少来回切换，这很好。还有，我的编辑是否将我的帖子推到了SO的顶部（你的评论是否也如此）？我担心这篇文章刚刚被掩埋，不会得到任何关于新代码的回应。我假设创建一篇新帖子，框架相同的问题，但包含所有代码，这是违反规则的？应该让你开始了谢谢！！！！我会仔细看看你做了什么。看看我错过了什么，做错了什么。我真的很感激。请向您（再次感谢您的帮助！它不仅有效，而且帮助我更好地理解jQuery）或我想的任何其他人提一个简短的问题。单击“包装器”div隐藏所有内容。这是我页面的基本容器。。。就z指数而言，我相信它比一切都重要。我想这就是为什么当前代码在单击外部时无法工作的原因。这里的解决方案是什么？jQuery中是否有“clickOutside”事件？事实上，我现在就去找……我想这是因为你有固定的位置。这些不是真正的“在”包装盒中，因此包装盒没有宽度/高度。我设置了

$（document）。单击（）

进行隐藏，但您必须检查event.target（我想）以确保单击不在其中一个div中。

div#wrapper {
margin:0 auto;
width:100%;
height:100%;
position:relative;
    top:0;
    left:0;
}  

.topIconNew {
background-color:red;
border:solid 1px #444444;
width:20px;
height:20px;
position:fixed;
    top:50px;
    left:450px;
cursor:pointer    
}

.topTip {
background-color:#d3d3d3;
border:solid 1px #444444;
width:80px;
height:20px;
position:fixed;
    top:70px;
    left:450px;    
}    

.topDrop {
background-color:#ffffff;
border:solid 1px #555555;
width:100px;
height:300px;
position:fixed;
    top:90px;
    left:450px;        
}    

$(document).ready(function() {

// tooltip hover
$("div.topIconNew").hover(
    function(){
        $("div.topTip").show();
    }
);        

//tooltip widening and dropdown menu

$("div.topIconNew").click(
    function(){
        //permanent tooltip
        $("div.topTip").show();
    },    
    function(){
        //widen tooltip
$("div.topTip").animate({width:200},"fast");
    },        
    function() {
        //show dropdown
        $("div.topDrop").slideDown(300);
    }
);
$("div.wrapper").click(
    function(){
        //hide dropdown (hide simultaneously)
        $("div.topDrop").hide();
    }
    function(){
        //hide tooltip (hide simultaneously)
        $("div.topTip").hide();
    {        
);

});