Fun with tooltips on a timeline

This is a fun script I created during my idle hours while at previous employer.  I wanted to somehow mimic comix-like conversation but on a single image only.  It was just for fun, but it can be however used to do something more useful;) What it basically does is that it displays tooltips in a predefined order. Click image below to see demo.

Click to go to Demo

I wrote simple timeline object which acts as a controller of tooltips – it shows them in given time above given DOM objects.  There is a few of tooltips build on jQuery, but qTip offers loads of options and custom events, which I use in timer.  The code is not perfect, but it works fine;)

How to use it:

var customTimeline = new timeline();

customTimeline.add({
	start: 10,
	duration: 3000,
	text: 'I don\'t hear',
	ownerId: 'deaf'
});			

customTimeline.add({
	start: 2500,
	duration: 2000,
	text: 'I don\'t see',
	ownerId: 'blind'
});

start: when the tooltip should show (in ms)
duration: how long will be the tooltip visible (in ms)
text: text it will contain
ownerId: ID of DOM element having the tooltip (ID must be unique ;))

I know that setting start in miliseconds is not very ‘user-friendly’ but for simple cases it is fine. I might refactor it if you ask me to 😉

Script dependencies:

jquery.js
jquery.qtip.js
jquery.timer.js – I use older version !
timeline.js

Customization:

customQtipParams = {
	content: 'this text will be replaced',
	show: 'myShow', //name of custom event to trigger qTip render
	hide: 'myHide', //name of custom event to trigger qTip destroy
	ready: true,
	position: {
		corner: {
			target: 'topRight',
			tooltip: 'bottomLeft'
		}
	},
	style: {
		name:'red', //name of predefined qTip style
		tip: 'bottomLeft', //position of qTip
		border: {
			 width: 7,
			 radius: 5
		},
		opacity: '50'
	}
};

customTimeline.play(customQtipParams);

Demo:

Click here

Have fun using it.