10

I'm trying to add a QuickTip to a form field, but can't find a way to make my code work. Firstly, I tried to use a qtip attribute

    {
        fieldLabel: 'Last Name',
        qtip:'This tip is not showing at all',
        name: 'last'
    }

and then using Ext.tip.ToolTip class:

Ext.create('Ext.tip.ToolTip', {
    target: 'rating_field',
    anchor: 'right',
    trackMouse: true,
    html: 'This tip is not showing at all'
});

Ext.QuickTips.init();

Here is a jsfiddle with the source code: jsfiddle

cansadadeserfeliz
  • 3,033
  • 5
  • 34
  • 50

6 Answers6

24

Yes, use the inputAttrTpl config and the data-qtip attribute:

{
    fieldLabel: 'Last Name',
    inputAttrTpl: " data-qtip='This is my quick tip!' ",
    name: 'last'
}
Reimius
  • 5,694
  • 5
  • 24
  • 42
  • 1
    With this method there's no optical indicator that shows that the form field provides a quick tip. Is there an easy way to add an icon if a quick tip is present? – user2345998 Aug 27 '14 at 09:56
  • I do not believe there is a very easy way, but you could add some CSS to change the field border or something with the appropriate configuration option – Reimius Aug 27 '14 at 15:50
  • 4
    that looks seriously ugly. Why can't they just have "qTip: 'my quicktip'"... meh – Oliver Watkins Dec 08 '14 at 12:41
8

I found the answer here: How should I add a tooltip to an ExtJS Component?

    {
        fieldLabel: 'Last Name',
        qtip: "This is a tip",
        name: 'last',
        listeners: {
            render: function(c) {
                Ext.QuickTips.register({
                    target: c.getEl(),
                    text: c.qtip
                });
            }
        }
    }
Community
  • 1
  • 1
cansadadeserfeliz
  • 3,033
  • 5
  • 34
  • 50
  • 3
    To clarify. I'd like to point out that while this works, it's just a roundabout way to do the same thing. All registering with "Ext.QuickTips.register" does is add the data-qtip attribute to the html. The only real reason to use this way instead is if you want an easier way to escape html with dynamically created qtips. – Reimius Feb 05 '14 at 18:26
4

Using vero4ka's answer I wrote a simple plugin which can be used with forms to enable quicktips on child fields.

Ext.define('Ext.form.QtipPlugin', {
    extend: 'Ext.AbstractPlugin',

    alias: 'plugin.qtipfields',

    init: function (cmp) {
        this.setCmp(cmp);

        cmp.on('beforerender', function () {

            var fields = cmp.query('field[qtip]');

            for (var i = 0; i < fields.length; i++) {

                fields[i].on('render', this.register, this);

            }

        }, this);
    },

    register: function (field) {
        var obj = {
            target: field.id
        };

        if (typeof field.qtip === 'string') {
            obj.text = field.qtip;
        } else if (typeof field.qtip === 'object') {
            // Allow qtip configuration objects.
            // i.e. qtip: { text: 'hi', ... }
            Ext.applyIf(obj, field.qtip);
        }

        Ext.tip.QuickTipManager.register(obj);
    }
});
Community
  • 1
  • 1
Will S
  • 744
  • 8
  • 17
3

For any form field, you can use this:

{
    xtype: 'textfield', // or anything else
    autoEl: {
        'data-qtip': 'This is working tip!'
    }
}
Sergey Bogdanov
  • 525
  • 9
  • 22
Steefler35
  • 123
  • 1
  • 10
  • This worked for adding a tip to a radiogroup item. `{boxLabel: 'Flat Rate', name: 'rate_type', inputValue: 1, autoEl: {'data-qtip': 'One rate regardless of usage.'}},` – Quixrick Jun 14 '17 at 18:12
0

You can also use the built-in plugin datatip on a form panel. in form panel (see http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.DataTip.html) :

in form config : 

plugins = [{ptype : 'datatip'}]

in field text config :

tooltip : "my tooltip text"
Arnaud Benhamdine
  • 81
  • 5
0

If you are generating tooltip dynamically then you can use below snippet:

txtFieldName.el.set({ "data-qtip": Ext.String.htmlDecode("Some Text") });
Nilay Mehta
  • 1,732
  • 2
  • 20
  • 26