Ext.ToolTip和Ext.QuickTips
ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的。

QuickTips代码示例：只需要加入Ext.QuickTips.init(); 就可以在html页面中使用。html页面 可以通过：

<input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">

我们可以看到下面的效果：



你也可以自定义这些QuickTips的属性：

Ext.apply(Ext.QuickTips.getQuickTip(), {

//maxWidth: 200,

//minWidth: 100,

//showDelay: 50,

//trackMouse: true,

//hideDelay: true,



//closable: true,

//autoHide: false,

//draggable: true,

dismissDelay: 0

});

Ext.ToolTip代码：

new Ext.ToolTip({

target: 'tip1',

html: 'test tooltip'

});

在html页面中加入：<a id=tip1 href="">11</a> 就可以看到下面的效果：



可以通过ToolTip设置图层自动ajax加载页面，代码：

new Ext.ToolTip({

target: 'ajax-tip',

width: 200,

autoLoad: {url: 'test/1.jsp'},

});

在html页面中加入：<a id=ajax-tip href="">ajaxtip</a> 就可以看到下面的效果：



打开的层可以关闭，代码：

new Ext.ToolTip({

target: 'close-tip',

html: 'test close',

title: 'test',

autoHide: false,

closable: true,

draggable:true

});

在html页面中加入：<a id='close-tip href="">'closetip</a> 就可以看到下面的效果：



打开的层随鼠标移动，代码：

new Ext.ToolTip({

target: 'track-tip',

title: 'Mouse Track',

width:200,

html: 'This tip will follow the mouse while it is over the element',

trackMouse:true,

dismissDelay: 15000

});

在html页面中加入:<a id=track-tip href="">tracktip</a> 就可以看到下面的效果：

可以访问此地址：http://blog.163.com/luiyadong-12345/blog/static/84542402010218115352990/