CODEWITHSUNDEEP
extjsheaderpanel
Demian
Demian

Reputation: 390

ExtJS - Add a tooltip to the header of a Panel

I'm developing an application that use Ext.panel.Panel control. This panel has a body and a header. What I need to do is to add a tooltip (just text) to the header of the panel (onlye the header not the body)

I was trying with this:

    listeners: {
    render: function () {
        this.getEl().dom.title = 'my custom tool tip';
    }
},

but it works only for the body, not the header. Do you have any idea how to do it? I'm using Ext 4.2.1

Edit:

This is how I'm trying to show the tooltip

Ext.define('XXX.XXX.XXX.MyCustomPanel', {
extend: 'Ext.panel.Panel',

setMyTitle: function() {
    var ds = this.getDataSource();

    try {
        this.setTitle(ds.getCustomTitle());
        // Add tooltip where tooltip = ds.getCustomTitle();

    } catch (e) {

    }
},

Thanks, Angelo

Upvotes: 1

Views: 5893

Answers (2)

BillyTom
BillyTom

Reputation: 2729

You should create a Ext.tip.ToolTip and assign it to your header:

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

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tip.ToolTip

Upvotes: 1

matt
matt

Reputation: 4047

You can configure attributes for header's underlying HTML element with the autoEl config in the panel's header config:

header: {
    autoEl: {
        title: 'This is a tooltip'
    }
}

Alternatively, if you want to use QuickTips:

header: {
    autoEl: {
        'data-qtip': 'This is a tooltip'
    }
}

Also see this fiddle.

EDIT: Applying the tooltip after the panel was already rendered (adjusted to your code):

setMyTitle: function() {
    var ds = this.getDataSource(),
        title = ds.getCustomTitle();

    try {
        this.setTitle(title);
        // again, obviously just one out of the two attributes
        this.getHeader().getEl().set({
            'title': title,
            'data-qtip': title
        });
    } catch (e) {

    }
}

Upvotes: 10

Related Questions