jQuery and CSS Menu Help!

Question

I'm attempting to make a menu bar that sticks to the bottom of the screen. Due to it's position on the screen I can't use anchor tags for hyperlinking because in Google Chrome it causes that small link bar to appear in the bottom corner (which overlays ontop of the menu).

As such, each menu icon is a DIV with a unique ID (eg. "profile") and the class "menu-item" is applied to it. Each of these icons will link to a specific page when clicked on (eg. why I want to use the onClick javascript event). However, when each of these icons is hovered over it pops a contextual tooltip (or submenu) above it. Inside this tooltip a further options or links. Consequently, I have come up with the following html construct:

  example image located here: https://i.stack.imgur.com/hZU2g.png

Each menu icon will have its own unique onClick link, as well as its own unique submenu/tooltip (which may have more links to different pages).

I am using the following jQuery to pop each submenu:

$(".menu-item").hover(function() {
    $('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
    $('#' + this.id + '-tip').hide();
}
);

The issue I'm having is keeping the tooltip visible when the cursor is moved off the icon and onto the submenu/tooltip (currently it disappears the second the icon is no longer hovered on). I want to jQuery fadein and fadeout effects to be applied to the appearance of the tooltip/submenu.

Comments, suggestions, code and jsfiddle examples would be greatly appreciated. Happy to clarify further if I was unclear on any aspects.

Thanks in advance.

Answer 1

You need to wrap the menu-item and tip links in a parent div like so:

<div class="item-wrapper" rel="profile">
    <div id="profile" class="menu-item"></div>
    <div id="profile-tip" class="tip">
        <a href="link1.php">Link1</a>
        <a href="link2.php">Link2</a>
    </div>
</div>

Then apply the hover function to .item-wrapper and reference the rel attribute (or any other attribute of your choosing):

$(".item-wrapper").hover(function() {
    $('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
    $('#' + $(this).attr("rel") + '-tip').hide();
});

This way when you hover over the links you will still be hovering over the .item-wrapper div.

UPDATE:

To answer your follow-up question, you will need to use setTimeout():

var item_wrapper = {
    onHover: function($obj, delay) {
        setTimeout(function() {
            $('#' + $obj.attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
        }, delay);
    },
    offHover: function($obj, delay) {
        setTimeout(function() {
            $('#' + $obj.attr("rel") + '-tip').hide();
        }, delay);
    },
    initHover: function($obj, delay) {
        $obj.hover(function() {
            item_wrapper.onHover($(this), delay);
        }, function() {
            item_wrapper.offHover($(this), delay);
        });
    }
};

item_wrapper.initHover($(".item-wrapper"), 1000);

The second argument to setTimeout() is the delay in milliseconds.