Using the Vaadin tooltip component in my HTML has been quite helpful. Here's an example of how I've implemented it:
<h1 id="heading-2">
salam
<vaadin-tooltip
theme="dark"
for="heading-2"
position="bottom-center"
text="Tooltip with position bottom-center"
></vaadin-tooltip>
</h1>
<h1 id="heading-3">
salam
<vaadin-tooltip
theme="light"
for="heading-3"
position="bottom-end"
text="Tooltip with position bottom-end"
></vaadin-tooltip>
</h1>
I have a requirement to dynamically change the background color of the tooltip based on the chosen theme.
The tooltip.ts file currently contains the following code snippet:
import { registerStyles } from "@vaadin/vaadin-themable-mixin";
import { css } from "lit";
registerStyles(
"vaadin-tooltip",
css`
:host[theme="dark"] {
font-family: var(--lumo-font-family);
// background-color: yellow;
}
`
);
registerStyles(
"vaadin-tooltip-overlay",
css`
:host {
font-family: var(--lumo-font-family);
// background-color: yellow;
}
:host::part(overlay) {
// background-color: red;
}
`
);
I am facing challenges in assigning styles to the overlay based on the class assigned to the tooltip. Additionally, I'm unsure about how to include a class in the overlay element.
I am willing to explore options for statically defining styles within the HTML as well.