[REACT] how to float text in calendar task list

[bin_yu]

Hi All,

I want to float text value as show in the following picture, how to do it?

floating text.png (32.99 KiB) Viewed 160 times

.

I tried to config floating attribute, but there is a syntax error

Syntax error.png (30.09 KiB) Viewed 160 times

[tasnim]

Sounds like you're looking for the CellTooltip feature. Please check the docs here https://bryntum.com/products/gantt/docs/#Grid/feature/CellTooltip

    features : {
        // enable CellTooltip and configure a default renderer
        cellTooltip : {
            tooltipRenderer : ({ record, column }) => record[column.field],
            hoverDelay      : 200
        }
    },

[bin_yu]

In react, I tried to config it, but it seemed that it didn't work. Could you provide me with codes?

tooltip.png (59.29 KiB) Viewed 155 times

[tasnim]

Sorry, forgot to mention. As you're in react you'd need to get rid of the features object and add Feature suffix after the feature-name

        cellTooltipFeature : {
            tooltipRenderer : ({ record, column }) => record[column.field],
            hoverDelay      : 200
        }

And it should work fine for you now.

[bin_yu]

In the BryntumCalendarProps, I didn't find cellTooltipFeature, only scheduleTooltipFeature. It seems that cellTooltipFeature doesn't work.

    scheduleTooltipFeature : {
        tooltipRenderer : ({ record, column } : any) => record[column.field],
        hoverDelay      : 200
    },

I also tried to add tooltipRenderer into columns, but it didn't work.

Finally, I added the following config in the models-list-features-cellTooltip, and it worked.

floating text2.png (86.82 KiB) Viewed 144 times

tool tip2.png (77.05 KiB) Viewed 144 times

[ghulam.ghous]

So the issue is resolved for you? Or do you need any further help?

[bin_yu]

all what I want, it works, thank you!