Displaying Tooltips on ColorPalette Tiles

Updated on Mar 26, 2026

Environment

Product

Progress® Kendo UI® ColorPalette for Angular

Description

I want to show a tooltip with the color name when the user hovers over a tile in the ColorPalette component. How can I display tooltips on ColorPalette tiles?

This Knowledge Base article also answers the following questions:

• How can I add a tooltip to each color swatch in the ColorPalette?
• Is it possible to show color names when hovering over ColorPalette tiles?
• How do I configure the Kendo UI Tooltip to work with the ColorPalette component?

Solution

To display tooltips on ColorPalette tiles:

1. Wrap the kendo-colorpalette element in a container that uses the kendoTooltip directive. Set its filter property to .k-colorpalette-tile to target individual color tiles.

   html

   <div kendoTooltip filter=".k-colorpalette-tile">
       <kendo-colorpalette [palette]="palette" ...></kendo-colorpalette>
   </div>

2. After the view renders, set a title attribute on each tile with the corresponding color name. Use the ngAfterViewChecked lifecycle hook because the ColorPalette renders its tiles dynamically.

   typescript

   public ngAfterViewChecked(): void {
       if (!isDocumentAvailable()) {
           return;
       }
   
       const tiles = document.querySelectorAll('.k-colorpalette-tile');
       tiles.forEach((tile: Element) => {
           const htmlTile = tile as HTMLElement;
           const colorValue = htmlTile.getAttribute('value');
   
           if (colorValue && !htmlTile.hasAttribute('title')) {
               const colorName = this.colorNames[colorValue];
               if (colorName) {
                   htmlTile.setAttribute('title', colorName);
               }
           }
       });
   }

   The isDocumentAvailable() guard (imported from @progress/kendo-angular-common) prevents a runtime error when the code runs in an SSR environment where the DOM is not available. The !htmlTile.hasAttribute('title') check ensures the attribute is set only once per tile.

The following example demonstrates the complete solution:

Change Theme

Theme

Loading ...

See Also

• ColorPalette Overview
• Tooltip Overview
• API Reference of the ColorPalette Component
• API Reference of the TooltipDirective