diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
index 36a0a9ebbd9..c56d8984814 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
@@ -3,6 +3,9 @@ import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "../tooltip/resour
import { accessible, defaults, floatingUIOwner, hidden, openClose, renders } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { getElementXY, GlobalTestProps } from "../../tests/utils";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { FloatingCSS } from "../../utils/floating-ui";
+import { CSS } from "./resources";
interface PointerMoveOptions {
delay: number;
@@ -1078,4 +1081,45 @@ describe("calcite-tooltip", () => {
expect(await tooltip1.getProperty("open")).toBe(false);
expect(await tooltip2.getProperty("open")).toBe(true);
});
+
+ describe("theme", () => {
+ const tooltipHTML = html`
+
+ placement: auto
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua.
+
+ auto
+ `;
+
+ describe("default", () => {
+ const tokens: ComponentTestTokens = {
+ "--calcite-tooltip-background-color": {
+ shadowSelector: `.${FloatingCSS.animation}`,
+ targetProp: "backgroundColor",
+ },
+ "--calcite-tooltip-border-color": {
+ shadowSelector: `.${FloatingCSS.animation}`,
+ targetProp: "borderColor",
+ },
+ "--calcite-tooltip-corner-radius": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "borderRadius",
+ },
+ "--calcite-tooltip-shadow": {
+ shadowSelector: `.${FloatingCSS.animation}`,
+ targetProp: "boxShadow",
+ },
+ "--calcite-tooltip-text-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "color",
+ },
+ "--calcite-tooltip-z-index": {
+ selector: "calcite-tooltip",
+ targetProp: "zIndex",
+ },
+ };
+ themed(tooltipHTML, tokens);
+ });
+ });
});