ExtJS专题（十二）Tooltips与QuickTips的使用

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

    

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

 .html代码 

 

<input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">
<a id=tip1 href="">wanglong</a>&nbsp;&nbsp;&nbsp;<a id=ajax-tip href="">ajaxtip</a>
<a id='close-tip' href="">closetip</a>
<a id=track-tip href="">tracktip</a>

 

 

 

//实现浮动提示.
Ext.QuickTips.init();
  //Test  ToolTip
new Ext.ToolTip({        target: 'tip1',        html: 'test tooltip'    });
 new Ext.ToolTip({        target: 'ajax-tip',        width: 200,        autoLoad: { url: 'AjaxPage.aspx' }    });
new Ext.ToolTip({        target: 'close-tip',        html: 'test close',        title: 'test',        autoHide: false,        closable: true,        draggable: true    });
new Ext.ToolTip({        target: 'track-tip',        title: 'Mouse Track',        width: 200,        html: 'This tip will follow the nouse while  it  is over the element',        trackMouse: true,        dismissDelay: 15000    });

 

 

 

 //实现浮动提示.

    Ext.QuickTips.init();

    //Test  ToolTip

    new Ext.ToolTip({

        target: 'tip1',

        html: 'test tooltip'

    });

    new Ext.ToolTip({

        target: 'ajax-tip',

        width: 200,

        autoLoad: { url: 'AjaxPage.aspx' }

    });

    new Ext.ToolTip({

        target: 'close-tip',

        html: 'test close',

        title: 'test',

        autoHide: false,

        closable: true,

        draggable: true

    });

    new Ext.ToolTip({

        target: 'track-tip',

        title: 'Mouse Track',

        width: 200,

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

        trackMouse: true,

        dismissDelay: 15000

    });

 //实现浮动提示.    Ext.QuickTips.init();    //Test  ToolTip    new Ext.ToolTip({        target: 'tip1',        html: 'test tooltip'    });    new Ext.ToolTip({        target: 'ajax-tip',        width: 200,        autoLoad: { url: 'AjaxPage.aspx' }    });    new Ext.ToolTip({        target: 'close-tip',        html: 'test close',        title: 'test',        autoHide: false,        closable: true,        draggable: true    });    new Ext.ToolTip({        target: 'track-tip',        title: 'Mouse Track',        width: 200,        html: 'This tip will follow the nouse while  it  is over the element',        trackMouse: true,        dismissDelay: 15000    });