原创? ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的 收藏

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.QuickTips.init();?? 必须的

Ext.apply(Ext.QuickTips.getQuickTip(),{...}); 是可选的，如果你想使用缺省配置，就完全可以省略掉这一段。

maxWidth??? 最大宽度
minWidth???? 最小宽度
showDelay?? 延时显示（毫秒）
trackMouse? 随着鼠标移动
hideDelay??? 延时自动隐藏 （缺省为true）
closable?????? 显示关闭图标（但是这个图标显然只是一个样子，鼠标点击不到它！）
autoHide???? 自动隐藏 （这个配置没用处，不管是真是假，都自动隐藏，实际需要用下面的dismissDelay来控制）
draggable??? 支持用鼠标拖动（实际上这个选项也不起作用，因为鼠标根本移动不到这里！）
dismissDelay 这个才是最有用的选项，否则你完全可以省掉这段Ext.apply的配置。因为缺省情况下这个浮动提示是经过一段时间以后就自动隐藏。只有通过设置这个值为0来关闭自动隐藏浮动提示！

Ext.ToolTip

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>? 就可以看到下面的效果：

?