How to Show Ballon tooltip when mouse stops

Question

[edit] So I used one of the javascript tooltips suggested below. I got the tips to show when you stop and hide if you move. The only problem is it works when I do this:

document.onmousemove = (function() {
    var onmousestop = function() {
        Tip('Click to search here');
        document.getElementById('MyDiv').onmousemove = function() {
        UnTip();
    };
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

But I want the function to only apply to a specific div and if I change the first line to "document.getElementById('MyDiv').onmousemove = (function() {" I get a javascript error document.getElementById('MyDiv') is null What am I missing....??

[/edit]

I want to display a balloon style message when the users mouse stops on an element from more than say 1.5 seconds. And then if they move the mouse I would like to hide the balloon. I am trying to use some JavaScript code I found posted out in the wild. Here is the code I am using to detect when the mouse has stopped:

document.onmousemove = (function() {
    var onmousestop = function() {
        //code to show the ballon
        };
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

So I have two questions. One, does anyone have a recommended lightweight javascript balloon that will display at the cursor location. And two, the detect mouse stopped code works ok but I am stumped on how to detect that the mouse has started moving again and hide the balloon. Thanks...

Answer 1

Check this link out, I use this one in my site and it works great http://www.walterzorn.com/tooltip/tooltip_e.htm

Answer 2

Here's a nifty jQuery plugin for a nice float over tool tip.

http://jqueryfordesigners.com/demo/coda-bubble.html

[edit] I guess without seeing the companion HTML it's hard to say what's wrong. I'd double check that the element has the appropriate ID specified in the tag. Apart from that, unless this is an academic exercise, I would suggest using something like the jQuery plugin that I referenced above. There are certainly many other pre-built tools like that which will have already dealt with all of the minutiae you're currently addressing.

Answer 3

document.onmousemove = (function() {
  if($('balloon').visible) {
  //mouse is moving again
}....//your code follows

Using Prototype.js syntax you can determine that the mouse has moved once the balloon is visible.

Answer 4

The jQuery plugin hoverIntent provides a similar behaviour. It determines if the user 'meant' to hover over a particular element by checking if they slow the mouse down moving into the elements and spend a certain amount of time hovering over the element.

It only fires the "out" event when the user leaves the element, which doesn't sound like exactly what you're looking for, but the code is pretty simple.

Also watch out for binding things to mousemove when you don't need to be collecting the events, mousemove fires a lot of events quickly and can have serious effects on your site performance. hoverIntent only binds mousemove when the cursor enters the active element, and unbinds it afterwards.

If you do try hoverIntent I have had some trouble with the minified version not firing "out" events, so I would recommend using the full, unminified source.

Answer 5

A bit late to be answering this, but this will be helpful for those in need.

I needed this function to be able to detect when the mouse stopped moving for a certain time to hide an HTML/JS player controller when hovering over a video. This is the revised code for the tooltip:

document.getElementById('MyDiv').onmousemove = (function() {
    var onmousestop = function() {
        Tip('Click to search here');
    }, thread;

    return function() {
        UnTip();
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

In my case, I used a bit of jQuery for selecting the elements for my player controller:

$('div.video')[0].onmousemove = (function() {
    var onmousestop = function() {
        $('div.controls').fadeOut('fast');
    }, thread;

    return function() {
        $('div.controls').fadeIn('fast');
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();