How to add tooltips to command buttons in a Syncfusion Grid for Angular

Question

I am using Syncfusion Grid component for my project and I have a command row that has several buttons with only icons as their content. but I want them to show the title of button as a tooltip when user hovers on them. is there any way to add tooltips to these buttons?

commands : CommandModel[];
constructor(){}
ngOnInit(){
 this.commands = [
  {buttonOption:{cssClass:'e-flat' , iconCss:'e-icons e-access' , 
   click:this.onClick.bind(this)}},
   //other buttons
 ]
}

Answer 1

You can show tooltip for the custom command buttons by using the “title” property.

public commands: CommandModel[];

public ngOnInit(): void {
    this.commands = [{ title: 'Access', buttonOption: { iconCss: ' e-icons e-access, cssClass: 'e-flat',click:this.onClick.bind(this)}  },];    }

sample

please refer Syncfusion help link