MarcTooltips.js GitHub

A vanilla JavaScript library for adding quick and stylish tooltips to your site

Download

MarcTooltips.js (~3kb minified)
MarcTooltips.css

Setup

Import them by adding the following lines inside <header>: 
<script type="text/javascript" src="MarcTooltips.js"></script>
<link type="text/css" rel="stylesheet" href="MarcTooltips.css" media="all"/>

Syntax

MarcTooltips.add(
	'#element',
	'Tooltip content',
	{
		position: 'down|up|left|right',
		align: 'center|left|right|top|bottom',
		onClick: false|true,
		onFocus: false|true,
		className: 'additional-classname',
	}
);

Demos

Simple tooltip.

HTML

<span id="example">Help</span>

JS

MarcTooltips.add('#example', 'Tooltip text');

Result

Mouse over this: Help
Custom position & align.

HTML

<span id="example">Help</span>

JS

MarcTooltips.add('#example', 'Tooltip text', {position:'right', align:'bottom'});
Result:
Mouse over this: Help
Multilpe elements.

HTML

<span id="example1">Element 1</span>
<span id="example2">Element 2</span>
<span id="example3">Element 3</span>

JS

MarcTooltips.add(
	['#example1', '#example2', '#example3'],
	'Same tooltip in different elements',
	{position:'bottom', align:'right'}
);
Result:
You can reuse the same tooltip for various elements: Element 1 Element 2 Element 3
Multiple elements (2).

HTML

<span class="example">Element 1</span>
<span class="example">Element 2</span>
<span class="example">Element 3</span>

JS

MarcTooltips.add('span.example', 'Same tooltip in different elements');
Result:
You can reuse the same tooltip for various elements (using CSS queries): Element 1 Element 2 Element 3
On focus.

HTML

<input type="text" id="example" />

JS

MarcTooltips.add('#example', 'On focus tooltip', {position:'right',onFocus:true});
Result:
Clickable.

HTML

<span id="example">Help</span>

JS

MarcTooltips.add('#example', 'Clickable tooltip', {onClick:true});
Result:
Clickable tooltips: Help
Custom class.

HTML

<span id="example">Help</span>

JS

MarcTooltips.add('#example', 'Custom tooltip', {className:'green'});
Result:
Clickable tooltips: Help