简单的EXT之ToolTip[悬浮层信息显示]

昨天写程序遇到需要实现一个功能,既鼠标移上之后,会浮动一个DIV层,显示信息,经高人指点,发现EXT中有一个tooltip可以实现。

如下图:

 

实现原理很简单:

 html代码:

  

Anchor below

JS代码:

new Ext.ToolTip({ target: 'bottomCallout', anchor: 'top', anchorOffset: 85, html: 'This tip/'s anchor is centered' }); 

anchor属性为定义悬浮屋的位置,有'top','left','right'.

target:发生为定义指向的页面标签的ID,页面标签可以是各种HTML标签。

html: 里面为悬浮层位置。也可以使用 contentEl:'XXDIV',来指向一个DIV。

简单介绍下面两个方法:

 tips.showBy(id)-----在需要多个实现时,可以定义一个tooltip,然后根据此方法指向不同的页面位置(标签)。

 tips.update('xxxx')------更新此tips的内容。

[此tips在对button时会失效,具体原因,是因为在button源码中没有anchor这个属性,解决方法还没有找到。]

 

你可能感兴趣的:(简单的EXT之ToolTip[悬浮层信息显示])