So I am trying replacing an extjs button with an image and have it display some tooltip. The thing is I just want to display the image and I dont want the background of the extjs button. Here is my code below. To get an idea of what I am talking about , here is the js fiddle: /

CSS:

.question {
    background-image: url(../www/css/slate/btn/question.png) !important;
    background-repeat: no-repeat;
}

Javascript:

{
    xtype: 'button',
    iconCls: 'question',
    tooltip: "<b>read-only</b>:Read-only users will have read only access to all pages<br> ",
    padding: '2 6 2 7',
    width: 20,
    height: 24
}

EDIT:I replaced the button with text and that shows only the image. But it does not dispaly the tooltip.

{
    xtype: 'text',
    cls: 'question',
    tooltip: "<b>read-only</b>:Read-only users will have read only access to all pagess ",
    height: 20,
    padding: '12 6 2 7'
}

So I am trying replacing an extjs button with an image and have it display some tooltip. The thing is I just want to display the image and I dont want the background of the extjs button. Here is my code below. To get an idea of what I am talking about , here is the js fiddle: http://jsfiddle/nCkZN/7/

CSS:

.question {
    background-image: url(../www/css/slate/btn/question.png) !important;
    background-repeat: no-repeat;
}

Javascript:

{
    xtype: 'button',
    iconCls: 'question',
    tooltip: "<b>read-only</b>:Read-only users will have read only access to all pages<br> ",
    padding: '2 6 2 7',
    width: 20,
    height: 24
}

EDIT:I replaced the button with text and that shows only the image. But it does not dispaly the tooltip.

{
    xtype: 'text',
    cls: 'question',
    tooltip: "<b>read-only</b>:Read-only users will have read only access to all pagess ",
    height: 20,
    padding: '12 6 2 7'
}

• javascript
• extjs
• extjs4.1
• extjs-mvc

• So it's not supposed to look like a button? Why make it a button? – Ruan Mendes Commented Dec 12, 2012 at 19:09
• Ok I updated it to just text..but that doesnt give me the tool tip anymore. jsfiddle/nCkZN/13 – Micheal Commented Dec 12, 2012 at 19:14

2 Answers 2

You can modify the look of the button through CSS http://jsfiddle/nCkZN/10/

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'button',
        cls: 'my-btn', // Add this so you can style the button
        iconCls:'questionIcon',
        tooltip:"<b>read-only</b>:Read-only users will have read only access to all pages<br> ",
        padding: '2 6 2 7'                    
    }]
});​

CSS

.questionIcon {
  background-image:url(http://www.myimage./pic.png) !important;
  background-repeat: no-repeat;            
}

.my-btn {
  border-radius: 0;
  background-image: none;
  border: 0;
}

you can alternatively use a regular Ext.Img and add a tooltip to it. Seems cleaner than using a button when you don't want a button. http://jsfiddle/nCkZN/15/

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'image',
        src:'http://www.southampton.ac.uk/isolutions/puting/elearn/blackboard/small_pen.gif',
        padding: '2 6 2 7',
        listeners: {
            render: function(cmp) {
                Ext.create('Ext.tip.ToolTip', {
                    target: cmp.el,
                    html: "<b>read-only</b>:Read-only users will have read only access to all pages<br> "
                });
            }
        }
    }]
});​

What you really seem to be after is a way to add a tooltip to any ponent. Here's a plugin to do it.

Ext.define('Ext.ux.Tooltip', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.ux-tooltip',

    /**
     * @cfg html The text to put into the tooltip
     */
    init: function(cmp) {
        var me = this;
        cmp.on('render', function() {
            Ext.create('Ext.tip.ToolTip', {
                target: cmp.el,
                html: me.html
            });        
        });
    }
});

Now it's easy to add a tooltip to any ponent http://jsfiddle/nCkZN/17/

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'image',
        src:'http://www.southampton.ac.uk/isolutions/puting/elearn/blackboard/small_pen.gif',
        padding: '2 6 2 7',
        plugins: {
            ptype: 'ux-tooltip', 
            html: '<b>read-only</b>:Read-only users will have read only access to all pages<br> '
        }
    }]
});

​

background-image: url(../www/css/slate/btn/question.png) !important;

First problem there is you need single quotes around your url.

In your jsfiddle, changed to this:

.question{
  background-image:url('http://www.southampton.ac.uk/isolutions/puting/elearn/blackboard/small_pen.gif');
  background-repeat: no-repeat;
}​

Second, you probably don't want to specify an iconCls if you don't actually have any text, you're better off just passing a cls. I think the iconCls is if you pass an icon in as a config.