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.
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:
Have fun using it.