diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16a21961..543792ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
## [Unreleased]
+### Added
+
+- ``
+ - prove useage of `usePlaceholder` by jest test coverage
+
## [24.4.1] - 2025-08-25
### Fixed
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index 7d078753..671d7cf5 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
import { loremIpsum } from "react-lorem-ipsum";
import { OverlaysProvider } from "@blueprintjs/core";
import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
import { Tooltip } from "../../index";
@@ -34,6 +35,7 @@ Default.args = {
children: "hover me",
content: testContent,
addIndicator: true,
+ onOpening: fn(),
};
export const MarkdownSupport = Template.bind({});
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
new file mode 100644
index 00000000..69fa7720
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import Tooltip from "./Tooltip";
+import { Default as TooltipStory } from "./Tooltip.stories";
+
+const checkForPlaceholderClass = (container: HTMLElement, tobe: number) => {
+ expect(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`).length).toBe(tobe);
+};
+
+describe("Tooltip", () => {
+ it("should render placeholder automatically for text tooltip", () => {
+ const { container } = render();
+ checkForPlaceholderClass(container, 1);
+ });
+ it("should render no placeholder automatically for html tooltip", () => {
+ const { container } = render(
+ this is a simple text tooltip} />
+ );
+ checkForPlaceholderClass(container, 0);
+ });
+ it("should render placeholder when `usePlaceholder===true`", () => {
+ const { container } = render(
+ this is a simple text tooltip} usePlaceholder={true} />
+ );
+ checkForPlaceholderClass(container, 1);
+ });
+ it("should render no placeholder when `usePlaceholder===false`", () => {
+ const { container } = render(
+
+ );
+ checkForPlaceholderClass(container, 0);
+ });
+ it("should be displayed on first mouse hover when no placeholder is used", async () => {
+ const { container } = render();
+ fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+ expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
+ });
+ it("should not be displayed on first mouse hover when placeholder is used but placeholder markup is swapped", async () => {
+ const { container } = render();
+ fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`)[0]);
+ checkForPlaceholderClass(container, 1);
+ await waitFor(() => {
+ expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+ checkForPlaceholderClass(container, 0);
+ });
+ });
+ it("should be displayed on two continues mouse hover when placeholder is used", async () => {
+ const { container } = render();
+ fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+ checkForPlaceholderClass(container, 1);
+ await waitFor(async () => {
+ expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+ checkForPlaceholderClass(container, 0);
+ fireEvent.mouseOver(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+ expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
+ });
+ });
+});
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index b470e96e..5af36740 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -199,7 +199,9 @@ export const Tooltip = ({
targetProps={
{
...otherTooltipProps.targetProps,
- "data-postplaceholder": `id${eventMemory.current}${searchId.current}`,
+ "data-postplaceholder": eventMemory.current
+ ? `id${eventMemory.current}${searchId.current}`
+ : undefined,
} as React.HTMLProps
}
>