We were wondering if it was possible to configure the image tooltip on the Kanban to show more than just the resource name?
Right now, we have the concept of roles on resources. This works perfectly fine on the Scheduler Pro - but we also want to show it on Kanban tasks as well. We don't want to add it on the Task itself because then its not obvious that the Role relates to the Resource and not the Task. So we decided a tooltip would be a good idea. So far the closest we have gotten is my adding it as a default template to the TaskTooltip (as documented here https://www.bryntum.com/docs/taskboard/api/TaskBoard/feature/TaskTooltip and second picture below).
This kind of works - however it seems likely that this will not look very good when we have multiple resources assigned to one task. We were wondering whether we could adapt the tooltip which appears on the image tag of the Kanban when we hover over it (the first picture below) so that it shows name and role. However we haven't found any docs to say this is possible to modify yet. Have we missed something or is it just currently not possible?
- Screenshot 2021-11-25 at 16.36.06.png (6.27 KiB) Viewed 86 times
- Screenshot 2021-11-25 at 16.33.58.png (12.9 KiB) Viewed 86 times
Check the base https://www.bryntum.com/docs/taskboard/api/Core/widget/Tooltip class.
It has https://www.bryntum.com/docs/taskboard/api/Core/widget/Tooltip#config-forSelector and https://www.bryntum.com/docs/taskboard/api/Core/widget/Tooltip#config-forElement that allow to add it to any HTML element you need.
All the best,
Great - thats helpful! But another big issue we're facing is how even to get at the html/css for this tooltip which lives on the task image avatar? We had a look at https://www.bryntum.com/docs/taskboard/api/TaskBoard/view/item/ResourceAvatarsItem#config-editor but theres nothing in there about the html or css. As far as we can see, the image comes from a inbuilt TaskItems config and has a field of resources and a type of resourceAvatars.
However we've not seen anything about how to grab it to build a tooltip on it or how to configure the already existing tooltip. Are we missing something obvious or is this just not possible?
Depends on your data structure. All you need is a
path to the image.
ResourceModel has a field to store that info.
In the class you mentioned we used the next code:
const imageUrl = resource.imageUrl || resource.image && (taskBoard.resourceImagePath + resource.image)
That's how that image gets, just use in in your tooltip.
CSS you can inspect in DOM tree using DevTools, but there are no need to do the same I assume. Maybe apply some size and round it, you know better!
All the best,