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

    技术2022-05-20  41

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

    如下图:

     

    实现原理很简单:

     html代码:

      <div id="bottomCallout" class="tip-target" style="width: 200px;">Anchor below</div>

    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这个属性,解决方法还没有找到。]

     


    最新回复(0)