DEVseo

Demo

I wanted to create a simple tooltip for a project I was working on and have seen plenty of jQuery examples, but as you may know by now I prefer to use the YUI library for all of my javascript. So I took this opportunity to write myself a nice little script that would do exactly what I wanted with the greatest of ease.

I also thought I would share the finished result with you, in case you are looking for the same sort of thing. It is configurable by changing a couple of the options at the top of the javascript, and if you know what you are doing you can always play about with the rest of the code as well.

I have a simple example page that can be found here, which contains all the javascript and CSS. As always I have used my own utilities function which combines a load of the library components into one and serves this purpose wonderfully. The CSS is in page, but in case you are lazy I'll post it all below anyways.

CSS (3)

Because I love the many functions found in CSS3 I've used that to enhance the tip as much as possible but it still degrades nicely enough that IE users will see something nice enough!

#tip-box {
	color: #000;
	background: #EFEFEF;
	border: 2px solid rgba(0,182,222,0.5);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	box-shadow: rgba(0,182,222, 0.7) 0 0 12px;
	-moz-box-shadow: rgba(0,182,222, 0.7) 0 0 12px;
	-webkit-box-shadow: rgba(0,182,222, 0.7) 0 0 12px;
	padding: 10px;

	-webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.1, rgb(204,204,204)),
	    color-stop(0.78, rgb(239,239,239))
	)
	-moz-linear-gradient(
	    center bottom,
	    rgb(204,204,204) 10%,
	    rgb(239,239,239) 78%
	)
}

The javascript

As with all my scripts the javascript has been namespaced so that it doesn't conflict with any of my other scripts that may be running on the same page.

YAHOO.namespace('yuitip');
YAHOO.yuitip.main = {

	YE:		YAHOO.util.Event,
	Dom:		YAHOO.util.Dom,
	$:		YAHOO.util.Dom.get,

	bgColor:	'#000',
	speed:		0.3,     // The animation speed
	opacity:	0.9,     // The tip opacity
	offset:		[15,15], // Offset from mouse (x,y)
	useAnim:	true,    // Whether or not to use animation
	maxWidth:	null,    // If specified, adds max-width style

	init: function(){

		yt.tipBox = document.createElement('div');
		document.body.appendChild(yt.tipBox);
		yt.tipBox.id = 'tip-box';
		yt.Dom.setStyle(yt.tipBox, 'display', 'none');
		yt.Dom.setStyle(yt.tipBox, 'position', 'absolute');
		if(yt.maxWidth !== null){
			yt.Dom.setStyle(yt.tipBox, 'max-width', yt.maxWidth 'px');
		}
		var yuitips = yt.Dom.getElementsByClassName('yuitip');
		var yuiLen = yuitips.length;

		for(var i=0;i<yuiLen;i  ){
			yt.YE.on(yuitips[i], 'mouseover', yt.show_yuitip, yuitips[i]);
			yt.YE.on(yuitips[i], 'mousemove', yt.move_yuitip, yuitips[i]);
			yt.YE.on(yuitips[i], 'mouseout', yt.close_yuitip, yuitips[i]);
		}

		var links = document.getElementsByTagName('a');
		var linkLen = links.length;
		for(i=0;i<linkLen;i  ){
			yt.YE.on(links[i], 'mouseover', yt.show_yuitip, links[i]);
			yt.YE.on(links[i], 'mousemove', yt.move_yuitip, links[i]);
			yt.YE.on(links[i], 'mouseout', yt.close_yuitip, links[i]);
		}
	},

	show_yuitip: function(e, el){
		yt.YE.stopEvent(e);
		if(el.tagName.toLowerCase() === 'img'){
			yt.tipText = el.alt ? el.alt : '';
		} else {
			yt.tipText = el.title ? el.title : '';
		}
		if(yt.tipText !== ''){
			var newTipText = yt.tipText.split(' - ');
			var tipLen = newTipText.length;
			yt.tipText = '';
			for(var i=0;i<tipLen;i  ){
				yt.tipText = newTipText[i] "<br/>";
			}
			yt.tipBox.innerHTML = yt.tipText;
			yt.Dom.setStyle(yt.tipBox, 'display', 'block');
			if(yt.useAnim === true){
				yt.Dom.setStyle(yt.tipBox, 'opacity', '0');
				var newAnim = new YAHOO.util.Anim(yt.tipBox,
					{
						opacity: { to: yt.opacity }
					}, yt.speed, YAHOO.util.Easing.easeOut
				);
				newAnim.animate();
			}
		}
	},

	move_yuitip: function(e, el){
		yt.YE.stopEvent(e);
		var movePos = yt.YE.getXY(e);
		yt.Dom.setStyle(yt.tipBox, 'top', (movePos[1]   yt.offset[1])   'px');
		yt.Dom.setStyle(yt.tipBox, 'left', (movePos[0]   yt.offset[0])   'px');
	},

	close_yuitip: function(e){
		yt.YE.stopEvent(e);
		if(yt.useAnim === true){
			var newAnim = new YAHOO.util.Anim(yt.tipBox,
				{
					opacity: { to: 0 }
				}, yt.speed, YAHOO.util.Easing.easeOut
			);
			newAnim.animate();
		} else {
			yt.Dom.setStyle(yt.tipBox, 'display', 'none');
		}
	}
}
yt = YAHOO.yuitip.main;
yt.YE.onDOMReady(yt.init);