[REACT] Customizing tooltips for task move and resize

[amandachen]

Hello,

I want to style the move and resize tooltips to look like this:

Screen Shot 2021-05-05 at 6.48.29 PM.png (45.62 KiB) Viewed 330 times

Which of the following would be the best approach?

1. https://www.bryntum.com/docs/gantt/#Gantt/view/Gantt#events Show and hide my own tooltip component when moving or resizing. Which event would I need to use for that? Will I have access to the new start and end dates while dragging or resizing?

2. Style Bryntum's tooltips. I have found this a bit hard since I cannot inspect the element. For this approach, could you let me know what the tooltip classes are? Or is there a way to have the tooltip always show so that I can inspect it?

[mats]

1. This is probably more work

2. Styling our tooltip should be easier yes. In the next release this is fixed: https://github.com/bryntum/support/issues/2244 and you can easily show any contents in the resize + drag drop tooltips. Recommend you to just click the Pause button in Chrome dev tools (F8 shortkey) then you can inspect and style them easily. The drag drop tooltip has a b-gantt-taskdrag-tooltip CSS class. For resizing, you can set your own CSS class using https://bryntum.com/docs/gantt/#Gantt/feature/TaskResize#config-tip

features : {
      taskResize : {
           tip : {
                cls : 'my-tooltip'
            }
      }
 }