Show elipses for long task names and show full name on hover


We have little longer task names for our tasks. Currently the task names are shown cut due to the width set to that column.Is there a way that we can show the longer task names with ellipses, and show full task name on mouse hover on the task name?

Thanks for any inputs.

You may use gantt.templates.task_text:

gantt.templates.task_text = function(start, end, task){ return "<span class='some_ellipsis_class' title='" + task.text + "'>" + task.text + "</span>"; };

If you need ellipsis, define it in “some_ellipsis_class” or just inline. But you may be fine with hint on hover which is added by using “title” attribute.

Just found there is also tooltip extension.

I have the same problem (long task names) when I export to .pdf: is it possibile to solve the problem?
In the .pdf file the task name is truncated and I can’t to make the grid too much wide.

Best Regards


You can try to solve this issue using rightside_text template.
Just check if the text is truncated, and if so - show it on the right side. Demo:

There is also leftside_text template.