Height of Vaadin tooltip (get rid of vertical scrollbars)

Hello at all,

I have a problem with the “native” Vaadin tooltip. The width of the tooltip depends on the widht of its content and is “dynamic”. The height of the tooltip is “static” in the meaning that the pop up has a “max” height and if the content needs more space the height does not increase any more instead of there is a vertical scrollbar (and in my opinion the max height is not very height).
In my point of view this is not very nice:

  • You can not see all information at once
  • Sometimes it is really tricky to use vertical scrollbar, especially when you have a lot of “small” components all with there own tooltip. If you move the mouse cursor to the right and down to use the scrollbar, the tooltip disappears, because the cursor has left the component and in worst case you can see another tooltip from another component.

What is the reason for that strange behaviour? Is there any possibility to change it? For example override VTooltip or something like this. What do I have to change? Or do I have to write my own tooltip implementation? Or is it possible to use another build-in tooltip, like the original browser tooltip?
It does not matter if I have to make the needed changes an client or server side. I am using Vaadin version 8.5.2. (and it is not possible to use Vaadin 10 or something like this

Thanks in advance, Philipp

You have basically two alternatives, the other is to use HTML in your tooltip, as shown in example here:


The other possibility is to adjust styles in your theme scss, the class name of the tooltip is v-tooltip.

Thanks, I did not thought it can be such easy. I did it via scss. What do you mean with using HTML? Shell HTML string containing some style information? Because if the string just contains “normal” html, e.g. a table, it does not harm the sizing of the tooltip.