Grid Summary Footer Cell Tooltip

[edonovan]

Hi, is it possible to configure a cell tooltip for a grid summery footer? - https://bryntum.com/products/grid/docs/api/Grid/feature/Summary

Thanks,

Emma

[marcio]

Hey Emma,

Thanks for reaching out.

Yes, it's possible to add a tooltip to the Grid summary footer, here's an example of how to do it https://codepen.io/marciogurka/pen/vYqgyPg.

https://bryntum.com/products/grid/docs/api/Core/widget/Tooltip

[edonovan]

Hi Marcio, thank you for the quick response. I have tried this and it's not working for me.. I am using version 5.6.11 within Salesforce LWC and I can see the tooltip object is being created but it's not showing on hover of the summary cells... is this compatible with v5.6.11 ?

[marcio]

Hey edonovan,

Do you see the other tooltips? Is this the only one that is not being displayed?

Could you please try with simple text in the tooltip to see if changes something? Also, confirm if there is no custom CSS being used that is overriding the default Tooltip in this case.

[Animal]

You could use a renderer in your Summary feature config: https://codepen.io/Animal-Nige/pen/mdZmoRr?editors=0010

But what extra information could you put in the tooltip? There seems to be no contextual information there. All that is passed is the summary value in the sum property. We probably should pass the Column that the summary is being created for. Also in keeping with other callbacks, it should allow a function name to be specified.

[edonovan]

Hi both,

Yes Marcio I can see other tooltips but just not the one on the summary row for some reason. There is no CSS overriding and I tried simple text and this also had no luck.

Animal, thanks for this suggestion this worked for us! Is there any way with this approach to handle any further tooltip configurations? By default the tooltip is showing on the top of the summary cell but we would like it to be to the right.

We have a design where the data inputted for some columns cannot sum over a certain amount, so in this scenario the summary cell is rendered in red with a warning icon, so when the user hovers on the cell a simple validation message is shown. There is no need in this case to pass any contextual info as of now so this approach works perfectly for us. Thanks again!

[Animal]

I have changed https://codepen.io/Animal-Nige/pen/mdZmoRr?editors=0110 to make the content only on the right so hovering the text will show the tip.

Until we fix the renderer to give more context, your renderer won't get any more context. It's a gap in the API. what do you need to see in there? I'm guessing the Column. That should definitely be passed in.

[Animal]

You can add data-btip-align to the renderer. See the docs for tooltip.

[Animal]

https://codepen.io/Animal-Nige/pen/mdZmoRr?editors=0110 updated again.

But align : 'l-r' doesn't look nice at the bottom of the page:

Screenshot 2024-08-05 at 16.05.51.png (162.22 KiB) Viewed 371 times