I have function for creating/rendering input fields but i don't know how to add tool tip on it in EXTjs6

this is my function:

createInputField: function(value, fieldsMarginBottom, readonly) {
        var fieldStyle = this.getFieldStyle(readonly);
        var nameField = Ext.create('Ext.form.field.Text', {
            name: 'name',
            readOnly: true,
            hideLabel: true,
            value: value,
            width: this.fieldWidth,
            style: {
                marginBottom: fieldsMarginBottom + 'px'
            },
            //My try which is not working
            tooltip: {
                trackMouse: true,
                width: 140,
                renderer: function(tip, item){
                    tip.setTitle('name');
                    tip.update('Count: ');
                }
            },
            fieldStyle: fieldStyle
        });
        return nameField;
    }

I hope you guys can help me. If you need any additional informations, please let me know and I'll provide. Thank you

I have function for creating/rendering input fields but i don't know how to add tool tip on it in EXTjs6

this is my function:

createInputField: function(value, fieldsMarginBottom, readonly) {
        var fieldStyle = this.getFieldStyle(readonly);
        var nameField = Ext.create('Ext.form.field.Text', {
            name: 'name',
            readOnly: true,
            hideLabel: true,
            value: value,
            width: this.fieldWidth,
            style: {
                marginBottom: fieldsMarginBottom + 'px'
            },
            //My try which is not working
            tooltip: {
                trackMouse: true,
                width: 140,
                renderer: function(tip, item){
                    tip.setTitle('name');
                    tip.update('Count: ');
                }
            },
            fieldStyle: fieldStyle
        });
        return nameField;
    }

I hope you guys can help me. If you need any additional informations, please let me know and I'll provide. Thank you

• javascript
• extjs
• extjs6

• Where in the docs did you find the tooltip configuration? – Alexander Commented Jul 11, 2016 at 6:45
• I haven't. I was googling around how to, but nothing seems to work. Do you have any idea how to implement this? – Valor_ Commented Jul 11, 2016 at 6:47

2 Answers 2

As can be seen in the textfield docs, fields do not have a way to add a tooltip to their configuration, so you would have to create the tooltip manually.

If you look at the docs for Ext.tip.ToolTip how to do that, you may find a small example, where you just have to change the target as per the target configuration description:

var tip = Ext.create('Ext.tip.ToolTip', {
    target: nameField.getEl(),
    html: 'Press this button to clear the form'
});

Above answer is correct. Here is example of generic function which you write once and use wherever you required in project by using using attributes.

addToolTip : function (id, msg) {
    new Ext.ToolTip({
            target : id,
            dismissDelay : 0,
            anchor : 'right',
            html : msg
        });
};