How to add a tooltip to a button

Dear all,

Please advise me how to add a tooltip to a button in Vaadin 10.
There is no button.setDescription(“Description”) as in Vaadin 8.

Thank you!

I’ve resolved it!
Easy, but not that obvious:
button.getElement().setProperty(“title”, “Description”)

Note that the title property is not quite equivalent as the old Vaadin 8 tooltips, as they can’t, for example, contain HTML formatting. But if you don’t need that, you’re good to go.


Olli, thank you for your comment. Are there any other option to add a right tooltip to a button in V10?

Generally, the title property is more correct (it’s better for e.g. screen readers), but if you need some rich content, you’ll need to create a custom solution for that, perhaps with <vaadin-overlay>.


Olli, you seem to know a lot of V10!))
I experience another big issue with it.
Looks like V10 doesn’t work with IE11. An application page in IE11 displays as a plain text without any styling while in Chrome or Edge everything looks beautiful.
Google gives no help.
Can you help with that or is it better to post a new thread about it here?
Thank you!

You need to make a production build for IE11 (IE11 doesn’t support web components natively). See this link for the docs: and this thread for more discussion:


The “.setDescription(String)” really solved my problem, but the box appears as black (i think is the my system color, and the characters are also black, making it impossible to read, there’s any way to set it to a default color?

That sounds like a styling issue? It’s hard to say what’s happening there without more information, maybe you can investigate with browser development tools?

Maybe I don’t know very well how to do it, but because it’s a description that shows when I hover the mouse inspecting it is beeing such a struggle, but thanks anyway, i will keep looking