SlickGrid: How to view full text in column headers?

Question

I'm using SlickGrid, and right now, if I have really long column headers, SlickGrid cuts the header short with ellipses (...).

My question is: Is there's a way to view the whole text on mouseover?

By the way, I was able to do it for long cell entries by registering this cool plugin https://github.com/mleibman/SlickGrid/blob/master/plugins/slick.autotooltips.js:

mygrid.registerPlugin(new Slick.AutoTooltips());

Here's a jsFiddle using that plugin: http://jsfiddle.net/crystality/h5ZLP/1/

Note that if you mouseover a cell with a long value, then you can view the full entry, but it doesn't do that for long column headers.

I'm thinking that I can edit that plugin to allow for that behavior. Any other suggestions? Thanks!

Answer 1

Ok - I got this. In the latest version of SlickGrid there seems to be a change made to the way the title attribute is set on the column-headers. Previously, the name attribute of the column would be set as title. Now we need to add a new parameter to the column definition - called toolTip. I edited your fiddle with this and now the tooltips work fine.

http://jsfiddle.net/100thGear/6sGXx/

I changed your column definition like this:

{ id: "long-val", name: "Really Really Really Long Title", 
field: "longVal", sortable:true, 
toolTip: "Really Really Really Long Title" }

Note that you don't need the slick.autotooltips.js to make this work. That's just for the tooltips on the data.

Let me know if this helps!

Answer 2

The Auto Tooltips plugin now has an option to add tooltips for header cells:

https://mleibman.github.io/SlickGrid/examples/example-autotooltips.html

Suggested Usage:

<script src="../plugins/slick.autotooltips.js"></script>

var options = {
    explicitInitialization: true,
};

grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
grid.init();