Questionmark tooltip icon in fieldcorner

Question

How can I display a small questionmark icon in one corner of a textfield that

reacts as a button
shows a tooltip when I hover over it
Can be applied to all fields

I don't want someone to do all the work for me but I haven't any idea where to start this

Edit: Here is a example of what it should look.

enter image description here

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.field.Trigger may provide required functionality (you will have to only change css of a trigger button) — Molecular Man, Jun 13 '13 at 08:11
@molecularman I am looking for the same like the red rectangle that pops up in a gridcell when the field is modified. Only that I want to be able the define the image (as CSS class like it is done for a button) and the corner like ul (upper left), ll (lower left), ur (upper right), lr (lower right). The triggerfield only places a button after the field, but not within. Anyway, thanks for your comment! — JJR, Jun 13 '13 at 08:29

score 0 · Answer 1 · answered Jun 13 '13 at 09:42

0

You can take advantage of beforeBodyEl. Add to your field config something like:

beforeBodyEl: '<div class="fieldTool"></div>'

CSS:

.fieldTool {
    position: absolute;
    right: 0;
    // presentation styling
}

Then you can attach afterrender event handler to the fields where you can fish out the div and set tooltips, click handlers etc:

onAfterRender: function(field) {
    var toolTip = field.getEl().down('div.fieldTool');
    // add some life to toolTip here
}

answered Jun 13 '13 at 09:42

Greendrake

3,657
2
18
24

Thanks for the answer. Can you take a look at my edit and tell me if I can archive this with your solution. I am quite new to ExtJs sorry. – JJR Jun 13 '13 at 12:13

score 0 · Answer 2 · edited May 23 '17 at 12:07

One way: create a component FieldSet. I give you example here:

Ext.define(MyApp.view.MyComponent', {
    extend: 'Ext.form.FieldSet',
    alias: 'widget.MyComponent',
    title: 'test',

    height: 100,
    margin: 0,
    padding: 0,
    width: 250,
    layout: {
        align: 'stretch',
        type: 'hbox'
    },

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',
                    height: 71,
                    width: 78,
                    layout: {
                        type: 'fit'
                    },
                    items: [
                        {
                            xtype: 'image',
                            height: 81,
                            width: 120,
                            name: 'myImage'
                        }
                    ]
                }
            ]
        });
        me.callParent(arguments);
    }
});

So, you need make it clickable, in controller file in render add:

fieldSet.getEl().on('click', function (e) {
   //here show that you need
});

You can add this component where you need it: xtype : MyComponent.

About tooltip: here's information how to work with it

Look at my comment: I create view like this:

with containers

Thanks for the answer, please see my edit. I think I didn't made it clear enough — JJR, Jun 13 '13 at 12:12
You can take my advice not for fieldset, for container. Your costom component will be: container with content 1) little container(image) and 2) textfield. — Nail Shakirov, Jun 13 '13 at 12:23

score -1 · Answer 3 · answered Jun 13 '13 at 08:02

-1

by simple using google i found those examples:

Example1 Example2 Example2

and most simple solution:

HTML

<input type="text"><input type="submit">

CSS

input[type="text"] {
    width: 200px;
    height: 20px;
    padding-right: 50px;
}

input[type="submit"] {
    margin-left: -50px;
    height: 25px;
    width: 50px;
    background: blue;
    color: white;
    border: 0;
    -webkit-appearance: none;
}

answered Jun 13 '13 at 08:02

Davor Mlinaric

1,989
1
19
26

Thank you for your answer. But as stated by sra I am looking for a implementation within the ExtJS component system – JJR Jun 13 '13 at 08:31

Questionmark tooltip icon in fieldcorner

3 Answers3