MooTools TinyTooltips

对于超链接标记的title属性,本身的提示效果我们并不是很满意,所以我们会使用JavaScript来打造自己的Tooltips效果。

MooTools More 也自带 Tips plugins ,使用起来也蛮方便的,它怎么使用不是我今天说的重点。

TinyTooltips,才是是今天的主角。我们使用到的技术有CSS border生成三角技术,CSS3圆角 和 MooTools 来实现一个 Tiny Tooltips 。

TinyTooltips

 

演示

 

The CSS Code :

1
2
3
#tooltip-container{ position:absolute; width:200px; display:inline-block; z-index:20; visibility:hidden; }
#tooltip-arrow-up{ height:0;width:0;overflow:hidden;font-size:0; line-height:0; border-color:transparent transparent #2f2f2f transparent; border-style:dashed dashed solid dashed;border-width:5px;margin:0 auto;}
#tooltip-content{ color:#fff; background:#2f2f2f; padding:5px 10px; font-size:1em; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; }

The MooTools JavaScript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    /* tooltips */
	var makeTooltips = function() {
		//build elements
		var container, top, content, originalWidth;
		if(!$('tooltip-container')) {
			container = new Element('div',{ 'id': 'tooltip-container' }).inject(document.body,'top');
			top = new Element('div',{ 'id': 'tooltip-arrow-up' }).inject(container);
			content = new Element('div',{ 'id': 'tooltip-content' }).inject(container);
		}
		else {
			container = $('tooltip-container');
			top = $('tooltip-arrow-up');
			content = $('tooltip-content');
		}
		originalWidth = container.getStyle('width').toInt();
 
		$$('.tooltip').each(function(el) {
			var text = el.retrieve('tooltipText') || el.get('title');
			el.set('title','').removeClass('tooltip').store('tooltipText',text).addEvents({																			
				mouseenter: function() { 
					//width?
					container.setStyle('width',(el.get('tooltipWidth') || originalWidth) + 'px');
					//position it
					var coords = el.getCoordinates();
					container.setStyles({
						left: coords.left - (container.getSize().x / 2) + (coords.width / 2),
						top: coords.top  + coords.height + 5
					});
					//set content
					content.set('text',text);
					container.fade(0.9); 
				},
				mouseleave: function() { container.fade(0); }
			});
		});
	};
	document.addEvent('domready', function() {
	/*	$('tip1').store('tooltipText', '提示内容一。');  
		$('tip2').store('tooltipText', '提示内容一。');  	
		$('tip3').store('tooltipText', '提示内容一。');  */	
	    makeTooltips();															  
	});

TinyTooltips 也支持”合元素存储机制”,可以通过Element Storage来指定提示信息。

 

演示

 

更为强大的Tips:

FloatingTips(tooltip position, centering, arrow size, distance, animation, etc)

参考资料:

CSS Border使用小分享

David Walsh Blog

站点统计