Hi Adam,
Good day to you.
We can customize the Gantt default tooltip by using the property tooltipSettings.taskbar. We have prepared a sample with custom tooltip, please find the code snippets for this below.
|
[template.vue]
<template>
<div id="tooltip">
<table>
<tbody>
//...
<tr>
<td>Start Date</td>
<td>:</td>
<td>{{format(data.StartDate)}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { Internationalization } from "@syncfusion/ej2-base";
let instance = new Internationalization();
export default {
data() {
return {
data: {}
};
},
methods: {
format: function(value) {
return instance.formatDate(value, { format: "MM/dd/yyyy" });
}
}
};
</script> [App.vue]
<template>
<ejs-gantt ref='gantt' id="GanttContainer" : dataSource="data" :tooltipSettings="tooltipSettings">
//...
</ejs-gantt>
</template >
import template from "./template.vue";
//...
export default {
data: function () {
return {
//...
tooltipSettings: {
taskbar: function () {
return { template: template }
}
},
}
},
}; |
Please find the below sample and documentation link.
Please let us know, if you require further assistance on this.
Thanks,
Gurunathan
