jQuery tooltip

5 Nov

Made a custom tooltip in scrumptious trails, as I want more immediate
feedback than the browser tooltip (as produced with “title”
attributes). And yes I realise it’s not as cool for usability, but
scrumptious trails degrade nicely to a XOXO (microformat) list of
URLs, in the absence of Javascript.

Mr. Tooltip is active when hovering over a navigation button, will
change position and caption when moving to another such button and
disappears 500 milliseconds after moving away from any nav button. The
500 millisecond delay prevents flickering on and off when the user
move in and out of the hotspot.

It’s absolute positioned (relative to the whole document). jQuery’s
awesome event.pageX and event.pageY make it dead-simple to position it
when an event takes place – .css({left: ev.pageX+5, top: ev.pageY+5}).

There are libraries for this kind of thing, but I wanted to avoid the
dependency for this single usage. Here’s the code.

GLOBAL

var $tooltip
$(function() {
$tooltip = $(“

“).appendTo(“body”);
})

CSS

.tooltip { position: absolute;
background: #ff9; border: 1px solid #cc6; padding: 3px;
z-index: 99999;
font-size: x-small; }

MOUSE ENTER

if ($tooltip.data(“predictor”)==this && $tooltip.isDisplayed()) return;
clearTimeout(tooltipTimer);
$tooltip
.data(“predictor”, this)
.html(spacify($predictedResource.title()))
.css({left: ev.pageX+5, top: ev.pageY+5})
.show();

MOUSE OUT

tooltipTimer = setTimeout(function() {
$tooltip.hide();
}, 500);

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: