Hover tooltip not working on header of TimeRanges

[jeick]

Hi,

the Bryntum calendar documentation provides an example on the TimeRanges page:
https://bryntum.com/products/calendar/docs/api/Calendar/feature/TimeRanges

I tried to apply to the code of the example what the documentation suggests in order to enable hover tooltips on the time range header.
The header div gets this CSS class when rendered: b-cal-timerange-header.

None of the two variants I tried were working, i.e. no tooltip appeared when hovering over the time range header div.

1.         // Enable and optionally configure the timeRanges feature:
           timeRanges : {
               // configuration goes here
               hoverTooltip: "Foo"
           }

2.         // Enable and optionally configure the timeRanges feature:
           timeRanges : {
               // configuration goes here
               tooltipTemplate({ timeRange }) {
                 return `${timeRange.name}`
               }
           }
   

What am I missing to enable hover tooltips?

I also noticed that the hatch-large CSS class on time range with id 13 from this dataset https://bryntum.com/products/calendar/docs/data/Calendar/examples/feature/time-ranges.json
is not showing correctly when opening the example in CodePen.

Thanks and have a nice weekend
Johannes

[tasnim]

Hi,

Those are for a Line therefore it can't display a name. To add tooltip to the timerange
you could use the renderer to achieve it https://bryntum.com/products/calendar/docs/api/Calendar/feature/TimeRanges#config-renderer

Here is a example :

        timeRanges : {
            // configure timeRanges feature...
            headerWidth : 42,
            renderer(props) {
                return '<div data-btip="FOOOOOOO">foo</div>'
            }
        },

Whatever you'll put inside of data-btip, it'll show it in the tooltip for that element

Hope it helps.

Best of luck ,
Tasnim