5

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!

Crystal
  • 191
  • 5
  • 10
  • Provide some example, plese. It is very difficult to say something without looking – d.k Jul 25 '12 at 08:32
  • @caligula: Edited, thanks! Example here: http://jsfiddle.net/crystality/h5ZLP/1/ – Crystal Jul 25 '12 at 08:58
  • How it is supposed to work? I see only white square – d.k Jul 25 '12 at 09:12
  • This is not a direct answer to your question, but I handled this by word-wrapping the column headers - check this link if you are interested: http://stackoverflow.com/questions/9098580/slickgrid-wordwrap-column-headers-in-ie7/10158995#10158995 – ganeshk Jul 25 '12 at 13:52
  • Also, to your question, the column-header has a title set (this has always worked for me). In your case the title is being set as blank - hence no tooltip. Inspect the column-header element in firebug or chrome dev tools - you'll see what I mean. – ganeshk Jul 25 '12 at 14:19

2 Answers2

9

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!

ganeshk
  • 5,583
  • 3
  • 27
  • 31
  • Also, do you know if there's a way to make the tip show only if the title is long? Currently, it always shows on mouseover. Small detail, but just curious! – Crystal Jul 27 '12 at 00:10
  • 1
    You could set the tooltip parameter only for those columns that are really long. You could do this programmatically as well - maybe subscribe to the `onColumnsResized` event and set the tooltip then. Just some thoughts! – ganeshk Jul 27 '12 at 00:17
  • @ganeshk can you please make your [jsFiddle](http://jsfiddle.net/100thGear/6sGXx/) in working condition. – Mohammed Abrar Ahmed Jul 04 '16 at 05:22
1

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();
Sam Watkins
  • 7,819
  • 3
  • 38
  • 38