ExtJs是通過Ext.ToolTip和Ext.QuickTips兩個組件來實(shí)現(xiàn)浮動提示功能的。
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> 就可以看到下面的效果:
打開的層可以關(guān)閉,代碼:
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> 就可以看到下面的效果:
打開的層隨鼠標(biāo)移動,代碼:
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> 就可以看到下面的效果: