英文:
How to add light theme and dark theme to Vaadin tooltip?
问题
在我的HTML中，我正在使用Vaadin提示组件，如下所示：
<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>
我想根据主题更改工具提示的背景颜色。
tooltip.ts 目前看起来像这样：
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;
}
`
);
我不知道如何根据工具提示具有的类样式化叠加层。我也不知道如何将类添加到叠加层。
我愿意在HTML中静态添加样式。
英文:
I'm using Vaadin tooltip component like this in my html:
<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>
and I want to change the background color of the tooltip based on the theme.
The tooltip.ts currently looks like this:
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 don't know how to give styles to overlay based on the class that tooltip has. I also don't know how to add the class to the overlay.
I am open to adding the styles statically inside the html too.
答案1
得分: 2
Tooltip通过使用overlay-class属性来将类名传递到其叠加层的自定义机制实现：
<vaadin-tooltip overlay-class="custom-tooltip" ...></vaadin-tooltip>
相应的CSS规则需要放在全局CSS中（而不是像您的示例中使用registerStyles）：
vaadin-tooltip-overlay.custom-tooltip::part(overlay) {
background: green;
}
英文:
Tooltip implements a custom mechanism for forwarding class names to its overlay by using the overlay-class attribute:
<vaadin-tooltip overlay-class="custom-tooltip" ...></vaadin-tooltip>
The corresponding CSS rule needs to be put into the global CSS (instead of using registerStyles as in your example):
vaadin-tooltip-overlay.custom-tooltip::part(overlay) {
background: green;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论