Hello Gerrit! Your component is very userful and looks good. Today we swit

Directory Tooltips4Vaadin
1

Hello Gerrit!

Your component is very userful and looks good. Today we switched to the Lumo-Dark-Style.

Is there a way to style the tooltip with a color like white as the background?

Thank you for your answer and many greetings from Germany,
Thomas

2

Hello Thomas

tippy itself supports themes out of the box.

This addon allows you define the the theme using TooltipConfiguration#setTheme but it does not include the CSS required to take advantage of prebuilt ones.

You could either include the necessary CSS for these work or define your theme as described in the [official tippy docs]
(https://atomiks.github.io/tippyjs/v6/themes/).

Best Regards
Gerrit

3

Maybe this helps… no need to set a theme in each TooltipConfiguration:

.tippy-box {
  background-color: var(--lumo-contrast);
  color: var(--lumo-base-color);
}

.tippy-box[data-placement^='top']
 > .tippy-arrow::before {
  border-top-color: var(--lumo-contrast);
}

.tippy-box[data-placement^='bottom']
 > .tippy-arrow::before {
  border-bottom-color: var(--lumo-contrast);
}

.tippy-box[data-placement^='left']
 > .tippy-arrow::before {
  border-left-color: var(--lumo-contrast);
}

.tippy-box[data-placement^='right']
 > .tippy-arrow::before {
  border-right-color: var(--lumo-contrast);
}
4

Thanks Moritz. This works great with Lumo.