Show Tooltip for Tasks in Gantt Treelist

Environment

Product	Progress® Kendo UI® Gantt for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I show a tooltip with the task data when I hover a task in the treelist of the Gantt?

Solution

1. Set the filter configuration option of the Kendo UI Tooltip. As a result, the widget will be displayed when a row from the Gantt treelist is hovered.
2. In the content option of the Tooltip, pass the hovered task data as its content.

For the full implementation of the approach, refer to this Dojo example.

	<script>
		$("#target").kendoTooltip({
			filter: ".k-gantt-treelist .k-grid-content tr",
			content: function(e) {
				// the element for which the tooltip is shown
				var target = e.target;
				var gantt = $("#gantt").data("kendoGantt");
				var task = gantt.dataItem(target);

				var title = task.title;
				var start = task.start;
				var end = task.end;

				// pass the task data as content for the Tooltip
				return "<strong>" + title + "</strong></br><p>Start: " + kendo.toString(start, "HH:mm ddd, MMM d") + "</p><p>End: " + kendo.toString(end, "HH:mm ddd, MMM d") + "</p>"
			},
			width: 200,
		    height: 100,
		    position: "bottom"
		});
	</script>