Add button tooltip in LitRendered template

Could you please advice how to add button with tooltip using LitRenderer (this button should be a part of a grid)?

You specify the vaadin-tooltip element as children of the vaadin-button with a slot attribute having “tooltip” as value

I tried that but this does not help …

return LitRenderer.<LogRecord> of(""" <vaadin-button theme="tertiary-inline" @click="${handleClick}"> \ <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon> \ <vaadin-tooltip slot="tooltip">Search for transactions</vaadin-tooltip> </vaadin-button> \ """)

Sadly I can reproduce your problem…

@useful-whale could it be possible that the grid’s feature to reduce the amount of tooltips per grid for the rows/column tooltips… interferes here with the explicit usage of tooltips on a button within the grid? The tooltip is correctly assigned in the DOM with ariaDescribedby but not visible when hovering the button

Not sure I can speculate on the mechanism at fault, but I could very well imagine that not working – I don’t think we ever even considered tooltips applied to other components inside cells.

If there’s only one element in that cell, though, you’re way better off with a tooltip generator on the Grid itself, though.

I can understand the use case :sweat_smile: I’ve also a column called actions with multiple buttons in a horizontal layout depending on a status column (this was created pre tooltip era with title attribute)

Yeah, totally valid use case. And tooltips on those various buttons should work. It was just never considered or tested.

Someone could create an issue with a reproducible example :thinking:

@useful-whale , could you please advice whether should this work in the latest beta or not?

BTW “title” attribute works on cell buttons though tooltip displayed is out of common style …

No fixes have been done for this in 24.2, and I don’t think we have a ticket about it either, so creating one at https://github.com/vaadin/web-components/issues/new?assignees=&labels=&projects=&template=bug-report.yml would be a good first step