2017-05-09 34 views
3

ボタンにツールチップを追加しようとしましたが、別の方法で試しましたが、ボタンの下にマウスを置いても何も起こりません。これは私のコードの一部ですこのツールチップ この私がEXTJSボタンにツールチップを追加する

var tooltips = [{ 
      target: 'guestButton', 
      html: 'A very simple tooltip' 
     }]; 
Ext.each(tooltips, function(config) { 
     Ext.create('Ext.tip.ToolTip', config); 
    }); 

Ext.QuickTips.init(); 

に感謝をツールチップを作成しようとしたとき、私はguestButton

{ 
    xtype : 'button', 
    id : 'guestButton', 
    text : 'Guest User', 
    handleMouseEvents: true, 
    width : 80, 
    x : 70, 
    y : 150, 
    formBind : false,      
    handler : function() { 
    this.up().LoginGuest(); 
    } 

とここと呼ばれるボタンを作成しました!

答えて

5

レンダリング時にツールチップを追加する別の方法です。
@chrisuaeは正しいですが、私にとってもうまくいきませんでした。何働いていた要素のレンダリングにツールチップを作成していた
:私は単純にこの行を削除し、あなたの答えを を

{ 
     xtype : 'textareafield', 
     grow : true, 
     fieldLabel : 'E-Mail-Adressess' 
     itemId : 'email', 
     afterLabelTextTpl : required, 
     allowBlank : false, 
     listeners : { 
      render: function(c) { 
      Ext.create('Ext.tip.ToolTip', { 
       target: c.getEl(), 
       html: 'You can enter multiple emails here' 
      }); 
      }  
     } 
    } 
3

あなたが使用してExtJSにあるボタンのツールチップを定義することができるはずです:あなたのボタンが無効になっている場合

xtype : 'button', 
id : 'guestButton', 
text : 'Guest User', 
tooltip: 'A very simple tooltip', 

、ツールチップが表示されません。これは仕様によるものですが、あなたがする必要がある場合は、いくつかのCSSでそれを上書きすることができます。

.x-item-disabled, .x-item-disabled * { 
    pointer-events:all; 
} 

はフィドルhereを参照してください。

0

おかげでhandleMouseEvents: true,魔法それは

の作品