diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts
index b502757508ba..ee323f549c2d 100644
--- a/packages/main/src/ColorPaletteItem.ts
+++ b/packages/main/src/ColorPaletteItem.ts
@@ -58,6 +58,16 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
@property({ type: Boolean })
selected = false;
+ /**
+ * Defines the tooltip of the component. If not provided, a default tooltip will be set to the color value.
+ *
+ * @default ""
+ * @public
+ * @since 2.1x.0
+ */
+ @property()
+ tooltip = ""
+
/**
* Defines the tab-index of the element, helper information for the ItemNavigation.
* @private
diff --git a/packages/main/src/ColorPaletteItemTemplate.tsx b/packages/main/src/ColorPaletteItemTemplate.tsx
index 6df6879e012c..f9ca9e55cc27 100644
--- a/packages/main/src/ColorPaletteItemTemplate.tsx
+++ b/packages/main/src/ColorPaletteItemTemplate.tsx
@@ -8,7 +8,7 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
role="button"
aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}
aria-pressed={this.selected}
- title={`${this.colorLabel} - ${this.index}: ${this.value}`}
+ title={`${this.colorLabel} - ${this.index}: ${this.tooltip ? this.tooltip : this.value}`}
>
);
}
diff --git a/packages/main/test/pages/ColorPalette.html b/packages/main/test/pages/ColorPalette.html
index 1d6c83cd4a36..f6ed8f07aeef 100644
--- a/packages/main/test/pages/ColorPalette.html
+++ b/packages/main/test/pages/ColorPalette.html
@@ -23,7 +23,7 @@
-
+
@@ -32,7 +32,7 @@
-
+