原文转自：http://seyo.javaeye.com/blog/230874
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> 就可以看到下面的效果：
可以实现的。其实可以不用ToolTip 直接用 html中的 title 来实现。 可以在要自定义的列中加入我们自己的函数就可以。如： {dataIndex: 'orderStatusName', header: '订单状态',width:140,renderer:excol}, 中 我们加入了：excol 函数，这样你就可以自己实现任何显示的方式。如果要实现 自动提示的功能 可以这样实现： function excol(value, p, record) { var olgin=record.data.orderStatusName; olgin = '<span title="'+olgin+'">'+olgin+'</apan> '; return olgin; }
