How add custom css tooltip to extjs column header?

Question

I am new to extjs . I am trying to add tooltip preferably css based to the column headers . How can I go about adding custom tooltip to the extjs column header using css? the extjs default way doesnt seem to work.

I tried using the custom css tooltip for the header and it didnt work .. Is it at all possible in extjs to custom tooltip on the header?

Thanks

var listView = Ext.create('Ext.grid.Panel', {
      store: mystore,
      multiSelect: true,
      splitHandleWidth: 10,
      columnLines: true,
       viewConfig: {
        emptyText: 'No images to display'
      },

      renderTo: containerEl,

      columns: [{
        text: '<a href="#" class="ttip" title="'+m.i18n.getString('notif.class')+'">'+e.i18n.getString('notif.class')+'<span class="classic">'+e.i18n.getString('notif.class')+'</span></a>',
        flex: 10,
        dataIndex: 'CName',
        tooltip: 'C Name Some name test',

        renderer: function (value, metaData, record) {
                    return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
                }
      }, {
        text: getString('notif.instance'),
        flex: 30,
        dataIndex: 'IDisplayName',
        renderer: function (value, metaData, record) {


   return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
                }
      }]
    });

CSS

     .ttip {
            border-bottom: 0px dotted #000000; color: #000000; outline: none;
    /*        cursor: help; */
             text-decoration: none;
            position: relative;
        }
        .ttip span {
            margin-left: -999em;
            position: absolute;text-decoration: none;
        }
        .ttip:hover,.ttip:active, .ttip:link,.ttip:visited{text-decoration: none; color:#000;}
        .ttip:hover span {
            border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Geneva, sans-serif;
            position: absolute; left: 1em; top: 2em; z-index: 9999999;
            margin-left: 0; width: 250px; 
        }
        .ttip:hover img {
            border: 0; margin: -10px 0 0 -55px;
            float: left; position: absolute;
        }
        .ttip:hover em {
            font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
            display: block; padding: 0.2em 0 0.6em 0;
        }
        .classic { padding: 0.8em 1em; }
        .custom { padding: 0.5em 0.8em 0.8em 2em; }
        * html a:hover { background: transparent; }
        .classic {background: #FFFFAA; border: 1px solid #FFAD33; }
        .critical { background: #FFCCAA; border: 1px solid #FF3334;    }
        .help { background: #9FDAEE; border: 1px solid #2BB0D7;    }
        .info { background: #9FDAEE; border: 1px solid #2BB0D7;    }
        .warning { background: #FFFFAA; border: 1px solid #FFAD33; }

was the answer below helpful?

dbrin
– dbrin

2014-12-09 17:14:55 +00:00
Commented Dec 9, 2014 at 17:14 — dbrin
– dbrin, Commented Dec 9, 2014 at 17:14

dbrin · Accepted Answer · 2013-04-22 03:44:01Z

4

So, I noticed you provided code for your store, but you are asking a question about the grid, which is a different component. Make sure you understand the relationship between the grid and the store. You should also use a Model definition instead of configuring fields on the store - which is the old way of doing things.

Having said that, I did come up with an interesting solution to your question: how to add a tooltip to the column header.

The column definition takes in a 'text' property that gets converted to the column header. The docs state that HTML tags are allowed, which means you can set a tooltip this way:

text: '<span data-qtip="hello">First Name</span>'

where data-qtip provides the text for the tooltip. Note that tooltips must be enabled via: Ext.QuickTips.init(); in your app.

To try other things use the docs Live Preview feature to quickly test out different configs and see them in action. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column

UPDATE: a tooltip property is now(since 4.1x) available on column config. Use that.

edited Apr 22, 2013 at 3:44

answered Feb 24, 2012 at 0:27

dbrin

15.7k4 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user244394 Over a year ago

@DimitryB - Thank you. I updated my code and i have included the custome css.. is it at all possible to make the custom css tooltip work? What do i need to change to make it work..

dbrin Over a year ago

Oh, I see what you are saying. You don't want to use the ExtJS tooltip for popup - you want to use your own. What you have should work, just need to make sure your CSS selectors are correct I guess.

user244394 Over a year ago

the css seem tow ork fien when outside extjs .. but doesnt seem tow okr when inside extjs for exmaple you try this code with css outside extjs it wlll work .. but not inside extjs <a href="#" class="ttip" title="'+m.i18n.getString('notif.class')+'">'+e.i18n.getString('notif.class')+'<span class="classic">'+e.i18n.getString('notif.class')+'</span></a>.. ANy idea why custom css doesn twokr in extjs or is possible to make fancy tool tip in extjs?

JoshuaDavid Over a year ago

@DmitryB Thx! This is definitely helpful, but note that the user must hover directly over the text with this solution (ie, next to the text but still in the column header cell is not good enough). Using a DIV instead of SPAN solves this for me.

dbrin Over a year ago

great, yeah you can supply any HTML you want, just be careful of artifacts of sorting, dragging etc that will add css classes to the header.

Hector · Accepted Answer · 2012-02-23 17:58:00Z

0

In the definition of your columns you only need set the tooltip parameter, like this:

var cm =  new Ext.grid.ColumnModel([
  {
    xtype: 'column',
    header: '<img src="../images/lupa.png">',
    align: 'center',
    dataIndex: 'consultar',
    width: 50,
    sortable: true,
    menuDisabled: true,
    tooltip: 'Permisos para consultar, si lo desactiva el usuario no verá el modulo'
  }
 ]);

I hope this help you

answered Feb 23, 2012 at 17:58

Hector

21

6 Comments

user244394 Over a year ago

is there an alternate ways to add using CSS? that doesnt seem to work

dbrin Over a year ago

there is no tooltip config on column in ExtJS4

JoshuaDavid Over a year ago

you should always specify what version of ExtJS you're talking about

XåpplI'-I0llwlg'I - Over a year ago

@dbrin Yes there is: link. If it's not working, make sure you initialize the QuickTips manager.

dbrin Over a year ago

It was not available at the time: See the source for Ext 4.07 docs.sencha.com/extjs/4.0.7/source/…

|

Collectives™ on Stack Overflow

How add custom css tooltip to extjs column header?

2 Answers 2

5 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related