How to add tooltip for a custom element ?

Sometimes, the user likes to set the custom element inside the taskbar and add tooltip for that custom element. The below code will explain how to do this.

// The template that defines the look for the task bars. "rq-gc-taskbar" is a built-in style that defines a default look for the task bars.Here,we add class and style for the custom element.

var tTemplate = "<div class='rq-gc-taskbar' data-bind='TaskColor: EndTime'><span class='headerTxt' style='display:none;'>radiantq</span><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div></div>";

// Applying your styles on demand.

$flexyGantt_container = $('#flexyGantt_container');

$flexyGantt_container.FlexyGantt({

............

});

// Applying your styles on demand.

updateTextVisibility($flexyGantt_container.data("FlexyGantt"));

function updateTextVisibility(gantt) {

var chart = gantt.GetGanttChartInstance();

chart.AfterChartRowsRender.subscribe(function () {

$(".headerTxt").css('display', 'inline-block').RQTooltip(getTooltipContent);

});

}

// Function to return the content of headerTxt's tooltip.

function getTooltipContent($this, evt) {

// To remove the taskbar's tooltip in headerTxt element.

$(".TaskTooltip").parent().remove();

// To prevent the taskbar's tooltip from displaying in headerTxt element.

evt.stopPropagation();

// Returns the content of the tooltip.

return "<div>Custom Tooltip</div>";

}

Update custom element visibility after printing to keep the on demand styles.

$("#print").click(function () {

var options = new RadiantQ.Gantt.PrintOptions();

options.AfterPrintComplete.subscribe(function () {

// Applying your styles on demand.

updateTextVisibility($flexyGantt_container.data("FlexyGantt"));

});

RadiantQ.Gantt.RQPrint(selectedGantt, options);

});