How to create a floating div with jQuery

Question

When the mouse is over an element A of a certain class , another floating div B, which contains a link, should appear. B should disappear as soon as the mouse has left A and B.

How can I do this with jQuery? jsFiddle

var container = $('#container');
var area = $('.area'); // this is A
var position = area.offset();

var floating = $("<div />", {
        css : { "position"  :   "absolute",
                "top"       :   position.top - 30,
                "left"      :   position.left + 20,
                "border"    :   "1px solid #000",
                "padding"   :   "5px",
                "display"   :   "none",
                "z-index"   :   "100",
                "background-color"  :   "#F00"
        }
    })
        .text('Hello World'); // this is B

    container.css('position', 'relative');
    container.append(floating);

    function show() {
        floating.show();
    }

    function hide() {
        floating.hide();
    }

    area.on('mouseenter', show);
    area.on('mouseleave', hide);
    floating.on('mouseenter', function(event) {
        console.log("floating: mouseenter");
        area.off('mouseenter', show);
        area.off('mouseleave', hide);
    });
    floating.on('mouseleave', function(event) {
        console.log("floating: mouseleave");
        area.on('mouseenter', show);
        area.on('mouseleave', hide);
    });

My problem is that evertime the mouse enters B, B disappears already. I need to do this with jQuery, not only CSS.

Answer 1

I'm not sure why you have to put the floating div in the jQuery. This is probably how I would achieve something similar to what you want.

http://jsfiddle.net/A2gFb/6/

Just put the hidden float in the HTML,

<div class="area">luptatum zzril
    <div class="fixed">Hello World!</div>
</div>

with proper CSS set.

.area {
    position: relative;
    color: #0F0;
    font-weight: bold;
    /* you may want to set the width/height here as well*/
}

.fixed {
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid black;
    padding: 5px;
    z-index: 100;  /* Thanks Diego for pointing out the typo here */
    background-color: red;
    display: none;
}

And the jQuery would be as simple as this:

$(".area").mouseenter( function() {
    $(".fixed").show();
});

$(".area").mouseleave( function() {
    $(".fixed").hide();
});

Answer 2

The major problem you are having is that the mouseleave event for your green text is firing before the mouseenter for your floating div. To fix this I made a variable to track the mouse being in the float and used a setTimeout in the hide() function to check for this variable after 100 ms. You could probably go lower if you were worried about the delay. Here's the fiddle.

At the top of the javascript:

var inFloat = false;

The hide() function becomes:

function hide() {
    setTimeout(function(){
        if (!inFloat)
            floating.hide();
    },100);
}

And your floating mouse events become:

floating.on('mouseenter', function(event) {
    inFloat = true;
});
floating.on('mouseleave', function(event) {
    inFloat = false;
    floating.hide();
});

You still have the issue that the floating div has a fixed position that isn't related to the mouse position, so it may be awkward to hover over the link and then move to floating div at times.

Answer 3

just add:

floating.on('mouseenter', show);
floating.on('mouseleave', hide);

it works on jsFiddle.

By the way, I suggest you to not use "show" and "hide" as function name since they already exist in jQuery. showTooltip and hideTooltip can be good names.