Question

I have a pretty specific request. I have been looking through some other posts, but can’t find a definitive answer on this, so help is appreciated.

I’m looking to get a jQuery tooltip that when hovered is a normal tooltip with the text centered. However, when you click the element, the tooltip widens to the left (the text would remain centered so it’d be appear to be moving left as the tooltips center moved left) and a dropdown menu slides out beneath the tooltip. I am still on the fence on whether or not the widening is going to be necessary, but I want the ability to have the dropdown on click.

Any and all help with this would be greatly appreciated. Thanks!

EDIT*** I have written some code that I can’t really get to work. Right now I’m just trying to work it out with divs, hoping I can replace the “toolTip” div with a tooltip shape instead of just a box, but I want to get things working before I worry about that. Any help on the following code is appreciated. Thanks!

I apologize in advance for the lack of some indentation and stuff, I don’t know why my code doesn’t ever copy/paste well into here.

HTML:

<div id="wrapper">

<div class="topIconNew">
</div>

<div class="topTip">
</div>

<div class="topDrop">
</div>

</div>

CSS:

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

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

}); 

Any and all help is greatly appreciated. Thanks!

Answer 1

Assuming from scratch I’d first build

1. A dropdown menu class that can be absolutely positioned
2. A tooltip class that can be absolutely positioned

It would be important for these classes to be self contained e.g. the dropdown should handle all bind events etc… First I’d hook up a hover element over whatever triggers the tooltip then position the tooltip and set the text. I’d then attach an onClick event to the same item and inside that I’d:

1. Flag the tooltip as “hover out no longer destroys it” (probably use an external click on the document instead)
2. Run an animate on the tooltip object that both sets the x position to x-200 (for instance) and also sets the width to with+200 (.animate({x: '-=200', width: '+=200'}))
3. I’d attach an event listener on animate so at the end of the animation I then attach the dropdown relative to the tooltip

If you code them separately it should be easy to tie them all together. You really just have to focus on the main evens in such a system:

1. Mouseover on item for tooltip
2. Mouseout on item for tooltip
3. Click on item to fly out tooltip and flag for permanence
4. Attaching the dropdown
5. Responding to dropdown events