mootools-ToolTip

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:

document.id('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:

document.id('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="http://github.com/images/modules/download/zip.png"][alt="ZIP"][width=144][height=142]'),
		new Element('img[src="http://github.com/images/modules/download/tar.png"][alt="TAR"][width=144][height=142]')
	)).show();
});

Demo 3

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

Code:

document.id('demo3').addEvent('click', function() {
	var toolTip = ToolTip.instance(document.id('demo3'), {
		autohide: false,
		position: {edge: 'left', position: 'right'}
	}, 'Image is loading...').show();
	new Asset.image('http://i.telegraph.co.uk/multimedia/archive/01356/random-crayons_1356872i.jpg', {
		onLoad: function() {
			// 'this' is an img element created by Asset.image
			toolTip.set(this).show();
		}
	});
});

Demo 4 - MooRainbow

MooRainbow Demo Control

Select Color:

Color Value:

Code:

var colorPicker = new MooRainbow(document.id('demo4'), {
	'imgPath': 'mooRainbow/',
	'onComplete': function(newColor) {
		this.element.setStyle('background-color', newColor.hex);
		document.id('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}
});
colorPicker.addEvents({
	'hide': function() {
		colorPicker.arrow.hide();
	},
	'show': function() {
		colorPicker.arrow.show();
	}
});

Demo 5 - DatePicker

DatePicker Demo Control

Click to select

Select Date:

Code:

var input = document.id('demo5-input');
var element = document.id('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
}).attach(element.getElements('span'));
datePicker.select(date);
datePicker.arrow = ToolTip.arrow({
	'relativeTo': datePicker.picker,
	'position': 'topLeft',
	'edge': 'right',
	'offset': {'y': 16}
});
datePicker.addEvents({
	'show': function() {
		this.position(element, this.options.pickerPosition);
		this.arrow.show();
	},
	'hide': function() {
		this.arrow.hide();
	},
	'select': function(date) {
		input.set('value', date.format('db'));
		element.getElements('span.label').set('html', date.format(this.options.labelDateFormat));
	}
});

« Back to title page