Fork me on GitHub


Demo 1

The following paragraph has some <abbr> tags in it, that show tooltips with its title text, when clicked. It also demonstrates, how URLs are automatically parsed in tooltip text.

In computing, a URL is a URI that specifies where an identified resource is available and the mechanism for retrieving it.
Source: Wikipedia

Code:'demo1').getElements('abbr[title]').addEvent('click', function() {
	ToolTip.instance(this, this.get('title')).show();

Demo 2

You can also have ToolTip display any Element. Click here to perform. This example also won't autoclose.

Code:'demo2').addEvent('click', function() {
	ToolTip.instance(this, {
		autohide: false,
		position: {position: 'bottom', edge: 'top'}
	}, new Element('div').adopt(
		new Element('em[html="GitHub allows you to download projects in the following formats:"]'),
		new Element('br'),
		new Element('img[src=""][alt="ZIP"][width=144][height=142]'),
		new Element('img[src=""][alt="TAR"][width=144][height=142]')

Demo 3

Click here to load a totally random image I've googled up.

Code:'demo3').addEvent('click', function() {
	var toolTip = ToolTip.instance('demo3'), {
		autohide: false,
		position: {edge: 'left', position: 'right'}
	}, 'Image is loading...').show();
	new Asset.image('', {
		onLoad: function() {
			// 'this' is an img element created by Asset.image

Demo 4 - MooRainbow

MooRainbow Demo Control : Select Color



var colorPicker = new MooRainbow('demo4'), {
	'imgPath': 'mooRainbow/',
	'onComplete': function(newColor) {
		this.element.setStyle('background-color', newColor.hex);'demo4-input').set('value', newColor.hex);
	'startColor': new Color('#fff')
colorPicker.arrow = ToolTip.arrow({
	'relativeTo': colorPicker.layout.getElement('div[class$="box"]').addClass('tooltip'),
	'position': 'topLeft',
	'edge': 'right',
	'offset': {y: 16}
	'hide': function() {
	'show': function() {;

Demo 5 - DatePicker

DatePicker Demo Control



var input ='demo5-input');
var element ='demo5-control');
var date = input.get('value') ? Date.parse(input.get('value')) : new Date();
var datePicker = new Picker.Date(element, {
	'draggable': false,
	'pickerClass': 'datepicker-lustr tooltip',
	'pickerPosition': 'topRight',
	'positionOffset': {'x':11,'y':-5},
	'startView': 'days',
	'timePicker': true,
	'useFadeInOut': false
datePicker.arrow = ToolTip.arrow({
	'relativeTo': datePicker.picker,
	'position': 'topLeft',
	'edge': 'right',
	'offset': {'y': 16}
	'show': function() {
		this.position(element, this.options.pickerPosition);;
	'hide': function() {
	'select': function(date) {
		input.set('value', date.format('db'));
		element.getElements('span.label').set('html', date.format(this.options.labelDateFormat));

« Back to title page