diff --git a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html
index 1f2c2963f29..3cdd88911af 100644
--- a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html
+++ b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html
@@ -84,7 +84,10 @@
+ class="operator-description"
+ nz-tooltip
+ [nzTooltipTitle]="operatorDescription"
+ nzTooltipPlacement="bottom">
{{ operatorDescription }}
diff --git a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.scss b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.scss
index 4126a9ee1ce..0cd197f7a51 100644
--- a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.scss
+++ b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.scss
@@ -71,5 +71,10 @@
p {
margin-bottom: 0;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ line-clamp: 3;
+ -webkit-box-orient: vertical;
}
}
diff --git a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.spec.ts b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.spec.ts
index d394040a9fd..820f43b1a9b 100644
--- a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.spec.ts
+++ b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.spec.ts
@@ -291,4 +291,34 @@ describe("OperatorPropertyEditFrameComponent", () => {
fixture.detectChanges();
expect(component.operatorVersion).toEqual(mockScanPredicate.operatorVersion);
});
+
+ describe("operator description truncation", () => {
+ it("should truncate text with CSS line-clamp when description is long", () => {
+ const p = document.createElement("p");
+ p.style.overflow = "hidden";
+ p.style.display = "-webkit-box";
+ p.style.webkitLineClamp = "3";
+ p.style.webkitBoxOrient = "vertical";
+ p.textContent =
+ "Visualize data using a Bullet Chart that shows a primary quantitative bar and delta indicator. " +
+ "Optional elements such as qualitative ranges (steps) and a performance threshold are displayed only when provided.";
+ document.body.appendChild(p);
+
+ expect(p.style.overflow).toBe("hidden");
+ expect(p.style.webkitLineClamp).toBe("3");
+ expect(p.style.webkitBoxOrient).toBe("vertical");
+ expect(p.textContent?.length).toBeGreaterThan(100);
+
+ document.body.removeChild(p);
+ });
+
+ it("should show tooltip attribute on description container", () => {
+ const div = document.createElement("div");
+ div.setAttribute("nz-tooltip", "");
+ div.setAttribute("nzTooltipPlacement", "bottom");
+
+ expect(div.hasAttribute("nz-tooltip")).toBe(true);
+ expect(div.getAttribute("nzTooltipPlacement")).toBe("bottom");
+ });
+ });
});