Protip Testing and Exemplification Suite

Example 1. Default Behaviour

Default behaviour is to take the element immediately after the trigger, and use that as the tooltip. The tooltip follows the mouse. Developers are invited to ensure that the intended tooltip immediately follows the target element in this situation.

Failure to place the correct element after the target element may result in unexpected element loss.

<div class="example-1 tooltip">Example tooltip trigger 001</div>
<div class="example-1 tip">Example tooltip 002</div>

<divclass="example-1 tooltip">Example tooltip trigger 002</div>
<div class="example-1 tip">Example tooltip 002</div>
				

$('.example-1.trigger').protip();
				

Notes

Please note that the tooltip is not generated until the first time it is needed. This is the reason the tooltips are visible on the page until you both have pressed the button and also hover over the trigger element. It is advised that you hide the tooltips in CSS to counter this.

Example 2. Anchor at Element

Protip has a wicked cool ability^TM to be anchored relative to the target element instead of the mouse cursor.

There are no known permanent side-effects to this procedure.

<div class="example-2 trigger">Example tooltip trigger 003</div>
<div class="example-2 tip">Example tooltip</div>

<div class="example-2 trigger">Example tooltip trigger 004</div>
<div class="example-2 tip">Example tooltip</div>
				

$('.example-2.trigger').protip({
	'anchor': 'element'
});
				

Example 3. Anchor Position

There are eight predetermined tooltip relative location docking nodes available to every trigger. You may request them by standard combinatory nomenclature.

There is also a Tooltip Configuration Parameter^TM 'offset' which allows dynamic relative repositioning of the tooltip by combining a horizontal displacement coordinate with a vertical displacement coordinate in an array or array-like structure.

<div class="example-3a trigger">Example tooltip trigger 005</div>
<div class="example-3a tip">Example tooltip 005</div>

<div class="example-3b trigger">Example tooltip trigger 006</div>
<div class="example-3b tip">Example tooltip 006</div>

<div class="example-3c trigger">Example tooltip trigger 007</div>
<div class="example-3c tip">Example tooltip 007</div>

<div class="example-3d trigger">Example tooltip trigger 008</div>
<div class="example-3d tip">Example tooltip 008</div>

<div class="example-3e trigger">Example tooltip trigger 009</div>
<div class="example-3e tip">Example tooltip 009</div>

<div class="example-3f trigger">Example tooltip trigger 010</div>
<div class="example-3f tip">Example tooltip 010</div>

<div class="example-3g trigger">Example tooltip trigger 011</div>
<div class="example-3g tip">Example tooltip 011</div>

<div class="example-3h trigger">Example tooltip trigger 012</div>
<div class="example-3h tip">Example tooltip 012</div>

<div class="example-3i trigger">Example tooltip trigger 013</div>
<div class="example-3i tip">Example tooltip 013</div>
				

$('.example-3a.trigger').protip({
	'position': 'top left'
});

$('.example-3b.trigger').protip({
	'position': 'top centre'
});

$('.example-3c.trigger').protip({
	'position': 'top right'
});

$('.example-3d.trigger').protip({
	'position': 'centre left'
});

$('.example-3e.trigger').protip({
	'position': 'centre centre'
});

$('.example-3f.trigger').protip({
	'position': 'centre right'
});

$('.example-3g.trigger').protip({
	'position': 'bottom left'
});

$('.example-3h.trigger').protip({
	'position': 'bottom centre'
});

$('.example-3i.trigger').protip({
	'position': 'bottom right'
});
				

Notes

When the mouse cursor is over the tooltip, it goes away. This is an undocumented feature and is likely to be removed in future versions.

Example 4. Selecting the Tooltip

The prime purpose of Protip is to allow you to select manually the tooltip that is shown at the element. The default behaviour is to take the element following the trigger but you can provide a function that returns any jQuery object instead.

This is known as Having Useful Functionality.

In this example we clone the trigger, change the content and classes, and return this altered clone.

<div class="example-4 trigger">Example tooltip trigger 014</div>
<div class="example-4 trigger">Example tooltip trigger 015</div>
				

$('.example-2.trigger').protip({
	'anchor': 'element',
	'tip': function() {
		var r = $(this).clone();
		var t = r.text();

		r.html( t.replace( 'trigger ', '' ) );
		r.removeClass('trigger').addClass('tip');
		r.appendTo('body');
		return r;
	}
});
				

Notes

It is necessary to ensure manually that your tooltip element is part of the DOM, since a good compromise for where to put it has not yet been established.

Example 5. Fixing The Tooltip

You can stop the hiding of the tooltip by using the onBeforeShow and onBeforeHide options. This works best with anchor = element.

<div class="example-1 tooltip">Example tooltip trigger 001</div>
<div class="example-1 tip">Example tooltip 002</div>

<divclass="example-1 tooltip">Example tooltip trigger 002</div>
<div class="example-1 tip">Example tooltip 002</div>
				

$('.example-5.trigger').protip({
	'anchor': 'element',
	'onBeforeHide': function() {
		if ( $(this).data('fixed') ) return false;
	}
});

$('.example-5.trigger').click(function() {
	if ($(this).data('fixed')) {
		$(this).data('fixed', false);
	} 
	else {
		$(this).data('fixed', true);
	}
});
				

Notes

Please note that the tooltip is not generated until the first time it is needed. This is the reason the tooltips are visible on the page until you both have pressed the button and also hover over the trigger element. It is advised that you hide the tooltips in CSS to counter this.