extjs的Tooltips与QuickTips

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

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

Java代码

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

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

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



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

Java代码

1. Ext.apply(Ext.QuickTips.getQuickTip(), {   
2.     //maxWidth: 200,   
3.     //minWidth: 100,   
4.     //showDelay: 50,   
5.     //trackMouse: true,   
6.     //hideDelay: true,   
7.      
8.     //closable: true,   
9.     //autoHide: false,   
10.     //draggable: true,   
11.     dismissDelay: 0  
12. });  

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代码：

Java代码

1. new Ext.ToolTip({   
2.        target: 'tip1',   
3.        html: 'test tooltip'  
4. });  

 new Ext.ToolTip({
        target: 'tip1',
        html: 'test tooltip'
 });

在html页面中加入：

Java代码

1. <a id=tip1 href="">11</a>   

<a id=tip1 href="">11</a> 

就可以看到下面的效果：



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

Java代码

1. new Ext.ToolTip({   
2.      target: 'ajax-tip',   
3.      width: 200,   
4.      autoLoad: {url: 'test/1.jsp'}   
5.  });  

new Ext.ToolTip({
     target: 'ajax-tip',
     width: 200,
     autoLoad: {url: 'test/1.jsp'}
 });

在html页面中加入：

Java代码

1. <a id=ajax-tip href="">ajaxtip</a>  

<a id=ajax-tip href="">ajaxtip</a>

就可以看到下面的效果：


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

Java代码

1. new Ext.ToolTip({   
2.         target: 'close-tip',   
3.         html: 'test close',   
4.         title: 'test',   
5.         autoHide: false,   
6.         closable: true,   
7.         draggable:true  
8. });  

new Ext.ToolTip({
        target: 'close-tip',
        html: 'test close',
        title: 'test',
        autoHide: false,
        closable: true,
        draggable:true
});

在html页面中加入：

Java代码

1. <a id='close-tip href="">'closetip</a>   

<a id='close-tip href="">'closetip</a> 

就可以看到下面的效果：


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

Java代码

1. new Ext.ToolTip({   
2.        target: 'track-tip',   
3.        title: 'Mouse Track',   
4.        width:200,   
5.        html: 'This tip will follow the mouse while it is over the element',   
6.        trackMouse:true,   
7.        dismissDelay: 15000  
8. });  

 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页面中加入:

Java代码

1. <a id=track-tip href="">tracktip</a>   

<a id=track-tip href="">tracktip</a> 

就可以看到下面的效果：