搞定tooltip

tooltip是一个最常见的东西，偏偏prototype还没有，rails也没有，只好外面找一个了。

目标是基于prototype，并且兼容性不错的，外观是可以调整的就行了。

http://www.nickstakenburg.com/projects/prototip/

这个看上去日期也算是比较新的，先用用看。

没想到rails里的prototype版本太低，不能用，就先升级了，这才可以用。

使用方法很容易，先引用css和js。

ruby 代码

1. <%= stylesheet_link_tag 'prototip' %>  
2. <%= javascript_include_tag 'prototip' %>  

当然你要先把文件拷好，缺省是public/javascripts 和public/stylesheets两个目录。

然后在需要的rhtml里用上，初始化一下就行。

js 代码

 

1. function local_init_tooltip(){  
2.     new Tip($('text_enter_noctrl'), "<%= :enter_noctrl.l('press Enter to send message') %>" );  
3.     new Tip($('text_enter_ctrl'), "<%= :enter_ctrl.l('press Ctrl+Enter to send message') %>" );  
4.     new Tip($('show_origin'), "<%= :show_origin.l('show origin') %>" );  
5.   
6. }  
7. local_init_tooltip();  

第一个参数是控件对象，第二个参数是内容，这里我用了国际化。

这样当鼠标移到指定对象上时，就可以显示tooltip内容了，很简单吧，兼容性也不错。

prototip还有一些控制属性，参见：

js 代码

 

1. new Tip(  
2.   element,                 // the id of your element  
3.   content,                 // html  
4.   {    
5.     className: 'tooltip',  // or your own class  
6.     duration: 0.3,         // duration of the effect, if used  
7.     effect: false,         // false, 'appear' or 'blind'  
8.     fixed: false,          // follow the mouse if false  
9.     hook: false,           // or { element: 'topLeft|topRight|bottomLeft|bottomRight',  
10.                                    tip: 'topLeft|topRight|bottomLeft|bottomRight' }  
11.     offset: {x:16, y:16}   // or your own, example: {x:30, y:200}  
12.     target: 'anotherId',   // make the tooltip appear on another element  
13.     title: false,          // or a string, example: 'tip title'  
14.     viewport: true         // keep within viewport. false when hooking is used.  
15.   }  
16. );  

可以有一些视觉效果、固定tooltip、显示一下title之类的，参照它的几个例子就全明白了。

总的来说，算是合作愉快，以观后效。