A while ago I wrote something into layout.js which allows you to attach tooltips to things by setting a class.
It's done using delegation so works on pagelets/JSON generated stuff too.
To give something a tooltip, all you have to do is set its 'title' attribute to whatever you want it to say, and then add one of the 'tip-' classes to its class.
The classes available are 'tip-top', 'tip-right', 'tip-bottom', 'tip-left'. The class name indicates the side of the element the tip will appear on (not the side the element is on).
Tips should then appear if you hover over the element for some number of milliseconds (400?).
If those classes aren't enough, there's a list in layout.js which contains classes used to extend my default tip class; to add a new tip class, add a line like the following:
{ name: '.tip-right', ext: { position: { my: 'center left', at: 'center right' } } },
'name' is the class name which will enable the tip, ext is the actual tip styling stuff (see qtip2 documentation).
ext extends qTipOptions such that ext will overwrite my default properties; additionally deep-extend is used so you have granular control over individual properties.
I propose that tool tips be added to most buttons/links which are not completely self-explanatory.
A while ago I wrote something into layout.js which allows you to attach tooltips to things by setting a class. It's done using delegation so works on pagelets/JSON generated stuff too. To give something a tooltip, all you have to do is set its 'title' attribute to whatever you want it to say, and then add one of the 'tip-' classes to its class. The classes available are 'tip-top', 'tip-right', 'tip-bottom', 'tip-left'. The class name indicates the side of the element the tip will appear on (not the side the element is on). Tips should then appear if you hover over the element for some number of milliseconds (400?). If those classes aren't enough, there's a list in layout.js which contains classes used to extend my default tip class; to add a new tip class, add a line like the following:
{ name: '.tip-right', ext: { position: { my: 'center left', at: 'center right' } } },
'name' is the class name which will enable the tip, ext is the actual tip styling stuff (see qtip2 documentation). ext extendsqTipOptions
such that ext will overwrite my default properties; additionally deep-extend is used so you have granular control over individual properties.I propose that tool tips be added to most buttons/links which are not completely self-explanatory.