CursorMessage: jQuery Tooltip for any event

Current version 0.2 (10-9-2009)

CursorMessage is a simple tooltip-like jQuery plug-in, to show messages near the cursor on ANY event, with a minimum of DOM dependancies.

Example 1:

Change the value of this input:

Example 2:

Example with custom hide-trigger (e.g. mouseout):

Example usage:

1. include jQuery, cursorMessage-plugin and use default or own cursorMessage CSS, e.g.: 

<script language="javascript" src="/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/cursorMessage/0.2/jquery.cursorMessage.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/cursorMessage/0.2/jquery.cursorMessage.css" />

 2. add desired event handlers, e.g.: 

<script type="text/javascript">
function showCursorMessage() {
	$.cursorMessage('You just entered '+$(this).val().length+' characters...');
}

$(document).ready(function() {
	$('#changeMe').keypress(showCursorMessage);
	$('#changeMe').keyup(showCursorMessage);
});
</script>

3. Since v 0.2 one can add custom triggers for showing and hiding the message, e.g.:

<script type="text/javascript">
$(document).ready(function() {
	$('#changeMe2').mouseover(function() { $.cursorMessage('hello', {hideTimeout:0}) });
		$('#changeMe2').mouseout($.hideCursorMessage);
	});
</script>

You can download cursorMessage 0.2 here

Options

You can pass options to cursorMessage() using the following syntax:

$.cursorMessage(message [, options] );

the options object can contain the following properties

• offsetX: pixel offset X-axis message from cursor (default 5)
• offsetY: pixel offset Y-axis message from cursor (default 5)
• hideTimeout: miliseconds to display the message (default 1000)