动态jQuery工具提示

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

我希望得到一个jQuery工具提示，当悬停是一个正常的工具提示与文本居中。但是，当您单击该元素时，工具提示会向左侧变宽(文本将保持居中，因此当工具提示中心向左移动时，它看起来会向左移动)，并且在下拉菜单中滑出工具提示。我仍然在围栏是否扩大是必要的，但我希望有能力下拉点击。

任何和所有的帮助，这将是非常感激。谢谢!

EDIT***我写了一些代码，我不能真正得到工作。现在我只是试图用div来解决这个问题，希望我可以用一个工具提示形状代替"工具提示"div，而不仅仅是一个框，但我想让事情在我担心之前工作。对以下代码的任何帮助都是感激的。谢谢!

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

<div id="wrapper">
<div class="topIconNew">
</div>
<div class="topTip">
</div>
<div class="topDrop">
</div>
</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();
    {        
);
});