如何为Vaadin Tooltip添加亮色与暗色主题并自定义背景色

问题场景 #

我在HTML中使用Vaadin Tooltip组件，代码如下：

<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>

希望根据theme属性修改Tooltip的背景色，当前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;
    }
  `
);

不清楚如何根据Tooltip的theme为overlay设置样式，也不知道如何给overlay添加类，同时接受静态HTML添加样式的方案。

解决方案 #

方法1：通过registerStyles关联主题样式 #

Vaadin Tooltip的theme属性会自动传递给其内部的vaadin-tooltip-overlay元素，因此可以直接在overlay的样式注册中通过主题属性选择器区分样式，同时利用::part(overlay)修改实际的弹窗背景：

修改tooltip.ts代码如下：

import { registerStyles } from "@vaadin/vaadin-themable-mixin";
import { css } from "lit";

// 可选：保留Tooltip本身的样式设置
registerStyles(
  "vaadin-tooltip",
  css`
    :host[theme="dark"],
    :host[theme="light"] {
      font-family: var(--lumo-font-family);
    }
  `
);

// 针对不同主题的overlay设置背景色
registerStyles(
  "vaadin-tooltip-overlay",
  css`
    // Dark主题样式
    :host[theme="dark"]::part(overlay) {
      background-color: #2d2d2d;
      color: #ffffff;
    }

    // Light主题样式
    :host[theme="light"]::part(overlay) {
      background-color: #ffffff;
      color: #2d2d2d;
      border: 1px solid #e0e0e0;
    }
  `
);

方法2：静态HTML内联样式方案 #

如果不想通过TS注册样式，可以直接在HTML中添加<style>标签，针对不同主题的overlay设置样式：

<style>
  /* Dark主题Tooltip弹窗样式 */
  vaadin-tooltip-overlay[theme="dark"]::part(overlay) {
    background-color: #2d2d2d;
    color: #ffffff;
  }

  /* Light主题Tooltip弹窗样式 */
  vaadin-tooltip-overlay[theme="light"]::part(overlay) {
    background-color: #ffffff;
    color: #2d2d2d;
    border: 1px solid #e0e0e0;
  }
</style>

<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>

关键说明 #

• Vaadin组件的theme属性会向下传递给内部关联的子组件（如Tooltip的overlay），因此可以直接通过[theme="xxx"]选择器定位目标元素。
• Tooltip的弹窗容器是通过overlay这个part暴露的，必须使用::part(overlay)才能修改其背景色，直接设置:host的背景色不会生效。

内容的提问来源于stack exchange，提问作者Newsha Nik