Orbital Tooltip Demo

Welcome to the demonstration page for the Orbital Tooltip written by Scott Brooks at UserFirst Interactive. The concept behind the Orbital Tooltip is to allow more flexibility to developers needing more specific positioning for their tooltips. With this jQuery plugin, you can position a tooltip around any element in a 360 degrees around it! Below are some samples of how it's used:

Works with boxes

my tip is at 20°

my tip is at 120°

my tip is at 220°

my tip is at 320°

Code:

$('#square1').orbitaltooltip({
	orbitalPosition: 	20,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 20</p>'
});
$('#square2').orbitaltooltip({
	orbitalPosition: 	120,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 120</p>'
});
$('#square3').orbitaltooltip({
	orbitalPosition: 	220,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 220</p>'
});
$('#square4').orbitaltooltip({
	orbitalPosition: 	320,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 320</p>'
});

Works with rectangles

my tip is at 20°

my tip is at 120°

my tip is at 220°

my tip is at 320°

Code:

$('#rect1').orbitaltooltip({
	orbitalPosition: 	20,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 20</p>'
});
$('#rect2').orbitaltooltip({
	orbitalPosition: 	120,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 120</p>'
});
$('#rect3').orbitaltooltip({
	orbitalPosition: 	220,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 220</p>'
});
$('#rect4').orbitaltooltip({
	orbitalPosition: 	320,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 320</p>'
});

Text links

Show me a link with a tip at 100°.

Show me a link with a tip at 200°

Show me a link with a tip at 300°

In case it's not obvious, due to the large width vs. height with these text links, there is only a gap of 10° on the left and right side of the text link we are adding a tooltip to.

only 10 degrees of separation on the right and left

so as we can see, only selecting a tooltip position of 85°-95° will place your tooltip to the right side of the A tag element.

Here's an example of the tooltip at link with a tip at 94°.

Code:

$('#text-link-100').orbitaltooltip({
	orbitalPosition: 	100,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 100</p>'
});
$('#text-link-200').orbitaltooltip({
	orbitalPosition: 	200,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 200</p>'
});
$('#text-link-300').orbitaltooltip({
	orbitalPosition: 	300,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 300</p>'
});
$('#text-link-94').orbitaltooltip({
	orbitalPosition: 	300,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>at 94</p>'
});

Styled A tags with styled tooltips

0° 90° 180° 270°

Code:

$('#button1').orbitaltooltip({
	orbitalPosition: 	0,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-default-top',
	html:			'<p>at 0</p>'
});
$('#button2').orbitaltooltip({
	orbitalPosition: 	90,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-default-right',
	html:			'<p>at 90</p>'
});
$('#button3').orbitaltooltip({
	orbitalPosition: 	180,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-default-bottom',
	html:			'<p>at 180</p>'
});
$('#button4').orbitaltooltip({
	orbitalPosition: 	270,
	spacing: 		10,
	tooltipClass: 		'orbitaltooltip-default-left',
	html:			'<p>at 270</p>'
});

Add Offset & spacing to the tooltip's location

By default, the center of your tooltip is aligned with the degree you choose. For example:

Example of a 10px offset with padding change as well

Here's a couple other examples:

default

-15 offset

15 offset

-15 padding

15 padding

Code:

$('#offsetdefault').orbitaltooltip({
	orbitalPosition: 	44,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>offset default</p>'
});
$('#offset1').orbitaltooltip({
	orbitalPosition: 	44,
	offset:			-15,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>offset -15</p>'
});
$('#offset2').orbitaltooltip({
	orbitalPosition: 	44,
	offset:			15,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>offset 15</p>'
});
$('#padding1').orbitaltooltip({
	orbitalPosition: 	44,
	spacing: 		-15,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>padding -15'
});
$('#padding2').orbitaltooltip({
	orbitalPosition: 	44,
	spacing: 		15,
	tooltipClass: 		'orbitaltooltip-simplebox',
	html:			'<p>padding 15</p>'
});

Download

Plugin

Download version:

Beta 0.1 - js

Complete Demo

Download: zip

Planned Development

Originally I had planned to release this plugin with the ability to actually turn on "orbiting", meaning the tooltip would actually animate around the object. But since I ran into a couple problems queuing up continuous javascript execution (the browser was freezing), I've pushed that functionality off until later. I will revisit the addition of this feature very soon =).

Questions? Comments?

We'd love to hear from you! Visit our blog and let us know what you think of our creations!

see all our creations