diff --git a/blazor/diagram/symbol-palette/customization.md b/blazor/diagram/symbol-palette/customization.md
index 6b8e362a0a..ab0f36d006 100644
--- a/blazor/diagram/symbol-palette/customization.md
+++ b/blazor/diagram/symbol-palette/customization.md
@@ -662,6 +662,84 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![Tooltip in symbol palette](../images/differenttooltip.gif)
 
+### Tooltip template for symbols
+
+You can provide custom template as tooltip for symbols in the symbol palette using [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolPaletteTemplates_TooltipTemplate) property of `SfDiagramComponent`. Once tooltip template is defined then enable the custom tooltip for symbols in the symbol palette by setting the Tooltip constraints for node and connector. This allows the tooltips template to be displayed when hovering over symbols in the symbol palette.
+
+The following code example illustrates how to provide the tooltip template for nodes.
+
+```csharp
+@using Syncfusion.Blazor.Diagram
+@using Syncfusion.Blazor.Diagram.SymbolPalette
+
+<div class="control-section">
+    <div style="width:20%">
+        <div id="palette-space" class="sb-mobile-palette" style="border: 2px solid #b200ff">
+            <SfSymbolPaletteComponent @ref="@SymbolPalette" Height="300px" Width="200px"
+                                      Palettes="@Palettes" SymbolHeight="60" SymbolWidth="60" SymbolMargin="@SymbolMargin">
+               <SymbolPaletteTemplates>
+                    <TooltipTemplate>
+                        @{
+                            if (context is Node node)
+                            {
+                                <div><p>Product Name : Diagram</p><p>Element: Node</p><p>Content: Node Tooltip</p><p>ID:@node.ID</p></div>
+
+                            }
+                        }
+                    </TooltipTemplate>
+                </SymbolPaletteTemplates>
+            </SfSymbolPaletteComponent>
+        </div>
+    </div>
+</div>
+
+@code
+{
+    SfSymbolPaletteComponent SymbolPalette;
+
+    //Define palettes collection.
+    DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
+
+    // Defines palette's flow-shape collection.
+    DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();
+
+    protected override void OnInitialized()
+    {
+        InitPaletteModel();
+    }
+
+    private void InitPaletteModel()
+    {
+        CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
+        Palettes = new DiagramObjectCollection<Palette>()
+        {
+           new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" },
+        };
+    }
+    private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
+    {
+        Node node = new Node()
+        {
+            ID = id,
+            Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
+            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
+            Tooltip = new DiagramTooltip()
+            {
+                Position = Position.BottomRight,
+                ShowTipPointer = true
+            },
+            Constraints = NodeConstraints.Default | NodeConstraints.Tooltip
+        };
+        PaletteNodes.Add(node);
+    }
+}
+
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip)
+
+
+>**Note:**  When the tooltip for the symbol is not initialized, the ID of the symbol will be rendered by default as the tooltip content. When the tooltip is defined, either content or template must be specified; otherwise, the tooltip will remain empty.
+
 ## Palette interaction
 
 Palette interaction notifies the element enter, leave, and dragging of the symbols into the diagram.
diff --git a/blazor/diagram/tool-tip.md b/blazor/diagram/tool-tip.md
index bab7950df2..31006defb6 100644
--- a/blazor/diagram/tool-tip.md
+++ b/blazor/diagram/tool-tip.md
@@ -358,18 +358,26 @@ The following code example is used to set tooltip tip pointer for connectors.
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TipPointerForConnectorTooltip)
 
 ## Tooltip template content
-
-To customize the tooltip content or to create your own visualized element on the tooltip,the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Template) can be used.
+To customize the tooltip content or create your own visualized element on the tooltip, you can use the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTemplates.html#Syncfusion_Blazor_Diagram_DiagramTemplates_TooltipTemplate) property of `SfDiagramComponent`.
 
 The following code example illustrates how to add the formatted template content to the tooltip for the nodes.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
-@using Syncfusion.Blazor.Popups
 @using Syncfusion.Blazor.Buttons
 
-<SfButton Content="Node Template" OnClick="@TemplateChange" />
-<SfDiagramComponent Width="1000px" Height="500px" Nodes="@nodes" />
+<SfDiagramComponent Width="1000px" Height="500px" Nodes="@nodes" >
+    <DiagramTemplates>
+        <TooltipTemplate>
+            @{
+                if (context is Node)
+                {
+                    <div><p>Product Name : Diagram</p><p>Element: Node</p><p>Content: Node Tooltip </p></div>
+                }
+            }
+        </TooltipTemplate>
+    </DiagramTemplates>
+</SfDiagramComponent>
 @code
 {
     //Define diagram's nodes collection
@@ -391,26 +399,16 @@ The following code example illustrates how to add the formatted template content
                     Fill = "#6495ED",
                     StrokeColor = "white"
                 },
-                Tooltip = new DiagramTooltip() { Template = getContent() },
+                Tooltip = new DiagramTooltip(),
                 Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
             };
         nodes.Add(node);
     }
-    //Method to getcontent
-    private string getContent()
-    {
-        string content = "<div><p>Product Name : Diagram</p><p>Element: Node</p><p>Content: Node Tooltip <p></p></div>";
-        return content;
-    }
-    //Change the Template at run time.
-    private void TemplateChange()
-    {
-        nodes[0].Tooltip.Template = "<p>TemplateUpdate</p>";
-    }
 }
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipTemplateForNode)
 
+
 The following code example illustrates how to add the formatted template content to the tooltip for the connectors.
 
 ```cshtml
@@ -418,8 +416,18 @@ The following code example illustrates how to add the formatted template content
 @using Syncfusion.Blazor.Popups
 @using Syncfusion.Blazor.Buttons
 
-<SfButton Content="Connector Template" OnClick="@TemplateChange" />
-<SfDiagramComponent Width="1000px" Height="500px" Connectors="connector" />
+<SfDiagramComponent Width="1000px" Height="500px" Connectors="connector">
+    <DiagramTemplates>
+        <TooltipTemplate>
+            @{
+                if (context is Connector)
+                {
+                    <div><p>Product Name : Diagram</p><p>Element: Node</p><p>Content: Node Tooltip </p></div>
+                }
+            }
+        </TooltipTemplate>
+    </DiagramTemplates>
+</SfDiagramComponent>
 @code
 {
     //Define diagram's connectors collection
@@ -435,26 +443,17 @@ The following code example illustrates how to add the formatted template content
                 ID = "Connector1",
                 SourcePoint = new DiagramPoint() { X = 500, Y = 500 },
                 TargetPoint = new DiagramPoint() { X = 600, Y = 400 },
-                Tooltip = new DiagramTooltip() { Content = "ConnectorTooltip", Template = getContent() },
+                Tooltip = new DiagramTooltip(),
                 Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
             };
         connector.Add(connectors);
     }
-    //Method to getcontent
-    private string getContent()
-    {
-        string content = "<div><p>Product Name : Diagram</p><p>Element: Connector</p><p>Content: Connector Tooltip <p></p></div>";
-        return content;
-    }
-    //Change the Template at run time.
-    private void TemplateChange()
-    {
-        connector[0].Tooltip.Template = "<p>TemplateUpdate</p>";
-    }
 }
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipTemplateForConnector)
 
+>**Note:**  When the content propoerty of the tooltip is also defined with the template for either node , connector or diagram, only the  content will get rendered. The template content will get rendered only when the content property is undefined.
+
 ## Tooltip animation
 
 To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the animation property. The [Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_AnimationSettings) property also allows you to set delay, duration, and various other effects of your choice.