diff --git a/packages/main/cypress/specs/ColorPalette.cy.tsx b/packages/main/cypress/specs/ColorPalette.cy.tsx
index 95c59f6f831c..aacd8c6e1c4b 100644
--- a/packages/main/cypress/specs/ColorPalette.cy.tsx
+++ b/packages/main/cypress/specs/ColorPalette.cy.tsx
@@ -281,3 +281,34 @@ describe("Color Palette - getFocusDomRef", () => {
});
});
});
+
+describe("Color Palette Item - tooltip", () => {
+ it("should display the color value as tooltip when no custom tooltip is set", () => {
+ cy.mount(
+
+
+
+ );
+
+ cy.get("#no-tooltip")
+ .shadow()
+ .find(".ui5-cp-item")
+ .should("have.attr", "title")
+ .and("contain", "darkblue");
+ });
+
+ it("should display the custom tooltip when tooltip property is set", () => {
+ cy.mount(
+
+
+
+ );
+
+ cy.get("#custom-tooltip")
+ .shadow()
+ .find(".ui5-cp-item")
+ .should("have.attr", "title")
+ .and("contain", "Raspberry")
+ .and("not.contain", "#d60d5a");
+ });
+});
diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts
index f20c390bd0bc..486b727adf3b 100644
--- a/packages/main/src/ColorPaletteItem.ts
+++ b/packages/main/src/ColorPaletteItem.ts
@@ -50,13 +50,23 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
* **Note:** Only one item must be selected per ui5-color-palette.
* If more than one item is defined as selected, the last one would be considered as the selected one.
*
- * @public
* @default false
+ * @public
* @since 2.0.0
*/
@property({ type: Boolean })
selected = false;
+ /**
+ * Defines the tooltip of the component. When not set, the color value is used as the tooltip.
+ *
+ * @default undefined
+ * @public
+ * @since 2.22.0
+ */
+ @property()
+ tooltip?: string;
+
/**
* Defines the tab-index of the element, helper information for the ItemNavigation.
* @private
@@ -107,6 +117,10 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
return ColorPaletteItem.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
}
+ get getLabelText(): string {
+ return `${this.colorLabel} - ${this.index}: ${this.tooltip || this.value}`;
+ }
+
get classes() {
// Remove after deleting the hbs template, it's added in the jsx template
return {
diff --git a/packages/main/src/ColorPaletteItemTemplate.tsx b/packages/main/src/ColorPaletteItemTemplate.tsx
index 6df6879e012c..f8dae34c0604 100644
--- a/packages/main/src/ColorPaletteItemTemplate.tsx
+++ b/packages/main/src/ColorPaletteItemTemplate.tsx
@@ -6,9 +6,9 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
class="ui5-cp-item"
tabindex={parseInt(this.forcedTabIndex)}
role="button"
- aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}
+ aria-label={this.getLabelText}
aria-pressed={this.selected}
- title={`${this.colorLabel} - ${this.index}: ${this.value}`}
+ title={this.getLabelText}
>
);
}
diff --git a/packages/main/test/pages/ColorPalette.html b/packages/main/test/pages/ColorPalette.html
index 1d6c83cd4a36..b961217011f9 100644
--- a/packages/main/test/pages/ColorPalette.html
+++ b/packages/main/test/pages/ColorPalette.html
@@ -23,8 +23,8 @@
-
-
+
+
@@ -32,7 +32,7 @@
-
+
diff --git a/packages/website/docs/_samples/main/ColorPalette/Basic/sample.html b/packages/website/docs/_samples/main/ColorPalette/Basic/sample.html
index 963c177d84ad..2a8310ac37f9 100644
--- a/packages/website/docs/_samples/main/ColorPalette/Basic/sample.html
+++ b/packages/website/docs/_samples/main/ColorPalette/Basic/sample.html
@@ -14,16 +14,16 @@
-
-
+
+
-
-
+
+
diff --git a/packages/website/docs/_samples/main/ColorPalette/Basic/sample.tsx b/packages/website/docs/_samples/main/ColorPalette/Basic/sample.tsx
index 921ea3aba3d3..2b28110acaa6 100644
--- a/packages/website/docs/_samples/main/ColorPalette/Basic/sample.tsx
+++ b/packages/website/docs/_samples/main/ColorPalette/Basic/sample.tsx
@@ -11,16 +11,16 @@ function App() {
-
-
+
+
-
-
+
+
);