====== Tips ====== Here is the [[http://docs.mootools.net/Plugins/Tips|documentation for Tips.js]]. (Tool)//Tips// are just little help popups to help users understand (possibly hidden) functionality. Not everyone knows you can drag something or double click it. //Tips// use the //title// property of an element to derive their caption and the //rel// property to retrieve their text.


Click me!

You can also use [[00-element#element-storage|Element storage]] to set the text and caption:


$('somePageLink').store('tip:title', 'Some Page');
 $('somePageLink').store('tip:text', "This is a link to 'Some Page'");

The css for the tooltip itself is something that you can make whatever you like. The css has to be defined though, otherwise the tooltip will look really bad. Here's the css I'm using, borrowed straight from MooTools.net.


.tip {
	color: #fff;
	width: 172px;
	z-index: 13000;
}

.tip-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	padding: 8px 8px 4px;
	background: url(/wiki/lib/tpl/clientside/images/bubble.png) top left;
}

.tip-text {
	font-size: 11px;
	padding: 4px 8px 8px;
	background: url(/wiki/lib/tpl/clientside/images/bubble.png) bottom right;
}

And here's the html:


var myTips = new Tips($$('.toolTipElement'), {
	timeOut: 700,
	maxTitleChars: 50, /*I like my captions a little long*/
	maxOpacity: .9 /*let's leave a little transparancy in there */
});