How to show different tooltip for symbols in palette?

This article explains how to show different tooltips for symbols in the palette. The tooltip is textual content that is displayed while the mouse hovers over an element. With the help of the JavaScript Diagram, the tooltip is displayed in the diagram while dragging, resizing, rotating a node, and when the mouse hovers over any diagram element. The tooltip is also added to the symbol palette, and it will be displayed when the mouse hovers over the symbols of the palette. You can also show other content in the symbol palette’s tooltip instead of the node ID by using the node’s addInfo property. The addInfo property of a diagram node is used to store additional information on the node.

The following code shows how to set addInfo and tooltip for symbol palette: 

 
// Set HTML node
 
{ id: 'Node2', shape: { type: 'HTML', content: '<div> <input type="button" value="Node2" id="node" /> </div>' }, 
    addInfo:[{text: 'Close Open Tasks2'}] }, 
 
public getSymbolInfo(symbol: NodeModel): SymbolInfo { 
    return { fit: true, tooltip: symbol.addInfo ? symbol.addInfo[0].text: symbol.id }; 
  } 
 
//HTML 
<ejs-symbolpalette id="symbolpalette" [expandMode]='expandMode' [palettes]='palettes' width="100%" height="700px" [getSymbolInfo]='getSymbolInfo' [getNodeDefaults]='getSymbolDefaults'> 
  </ejs-symbolpalette>
 

In the above code sample, the addInfo property is used to store additional information about the node, and it is set as tooltip content. With the symbolInfo property of the symbol palette, you can set this tooltip content to the symbol tooltip. So, when you hover over the node, this content gets displayed as a tooltip for a node in the symbol palette.

Sample: https://stackblitz.com/edit/angular-9fihxl-8dt8jn?file=app.component.ts