Styling Tooltips & Component Errors with CSS?

Vaadin 6 / 7 / 8 Framework UI
1

Hello everyone,

this is a question that has haunted me for quite a while now. How can I style the overlays that appear on Vaadin UI components that show their “description” text (a.k.a. tooltip) or component errors (I’m not talking about the error indicator icon, but about the overlay that appears when you hover over it with your mouse).

There actually is a chapter in the book of vaadin about tooltips (see here:
https://vaadin.com/book/-/page/components.features.html
), unfortunately it does not mention the corresponding CSS selectors. A small example snippet of CSS that shows how to style the background color of the overlay (one for tooltips, one for errors) would be very helpful! I guess this would only be 2 or 3 lines of code, but without knowing the name of the selector, this is difficult.

Thank you,

Martin


EDIT:

I’ve found the following CSS rules in the “Runo” theme “common.css” file:

.v-tooltip {
background-color: #fffcdd;
border: 1px solid #b8b295;
border-top-color: #d5d2c1;
border-left-color: #d5d2c1;
font-size: 11px;
font-family: arial, helvetica, tahoma, verdana, sans-serif;
color: #5d5444;
}
.v-tooltip-text {
padding: 2px 4px;
border: none;
border-top: 1px solid #fffef5;
border-bottom: 1px solid #fbf8d9;
}
.v-tooltip .v-errormessage {
padding: 3px 4px 3px 4px;
background: #ffecc6;
color: #b74100;
border: none;
border-top: 1px solid #fff3dc;
border-bottom: 1px solid #ead7b1;
}
.v-tooltip .v-errormessage h2 {
font-size: 16px;
font-weight: normal;
color: #ab3101;
margin: 2px 0 8px 0;
}
.v-tooltip .v-errormessage h3 {
font-size: 13px;
font-weight: bold;
margin: 1px 0 4px 0;
}

This stuff certainly does look related. I’ve added it to my style sheet, however to no avail - my tooltips are still completely unstyled, they use Times New Roman 12p, without any background…

2

Hey Martin,

.v-tooltip is indeed the correct selector for styling tooltips. What theme are you using? Did you add the style changes to your .scss file?

3

Hi Joacim,

that’s good to know that I’m using the right selector. One of my teammates usually handles the CSS stuff but he’s currently on vacation so I thought that I might try it myself for once (CSS newbie here). To my knowledge, we are using a modified version of the theme provided by the Vaadin Dashboard Demo (
http://demo.vaadin.com/dashboard/
). I tried to copy-paste the CSS I’ve posted above into our “common.scss” file, but it didn’t change anything. Whatever style I choose in the file, it is completely ignored by my web browser.

I also used the “file search” feature of Eclipse to run a project-wide search for “.v-tooltip”, hoping to find another rule that overrides my CSS styles, but I couldn’t find anything of significance. I used firebug and Chrome’s “inspect this element” feature (by now I’ve figured out where to look for tooltips in the HTML DOM tree generated by vaadin, its located at the very end), but everything it tells me is that the CSS styling for the tooltip originates from an “inline” definition (which is rather strange, imho it should come from the scss file).

I’m starting to remember why I felt so utterly frustrated when I tried to use CSS last time…

4

Hey Martin,

Do you have a file/folder structure that looks like this: WebContent/VAADIN/themes//? If so, there should be a .scss file in that folder.

Add your styles there instead, and try that out.

5

Hi Joacim,

OH-MY-GOD that did it!! Thank you very much :smiley: I already started to doubt my mental sanity you know xD

Do you have any idea why it works in the main file? Does that mean that some of our *.scss files are not linked properly? As I said earlier, I’m usually not responsible for those things.

6

Hey Martin,

It doesn’t necessarily mean that. It depends on where/how you import the common.scss file. It’s difficult to say without seeing the code.

If you want, you could spend a couple of minutes reading
https://vaadin.com/book/-/page/themes.html
,
https://vaadin.com/book/-/page/themes.creating.html
. That should give you a good foundation on how themes are built in Vaadin.

7

Hi Joacim,

thank you for your help and for the reference, I’ll take a look at it :slight_smile: