885940: UG change with examples for the tooltip template

blazor/diagram/symbol-palette.md

@@ -650,11 +650,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ## How to provide tooltip for symbols in symbol palette
 
-Symbol palette provides supports to show toolip when mouse hovers over any node or connector. The tooltip can be customized for each symbols in the symbol palette.
+Symbol palette provides supports to show tooltip when mouse hovers over any node or connector. The tooltip can be customized for each symbols in the symbol palette.
 
 ### Default tooltip for symbols
 
-By default, the symbol's ID will be displayed as the tooltip for each symbol in the symbol palette. The following image illustrate how the tooltip displays when mouse hovers over the symbols in symbol palette.
+By default, the symbol's ID will be displayed as the tooltip for each symbol in the symbol palette when the tooltip property is not defined. The following image illustrate how the tooltip displays when mouse hovers over the symbols in symbol palette.
 
 ![Default Tooltip in symbol palette](images/defaulttooltip.png)
 
@@ -725,6 +725,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![Tooltip in symbol palette](images/symboltooltip.png)
 
+
 ## How to provide different tooltip for Symbol palette and diagram elements.
 
 When you define custom tooltip to the symbol then same tooltip will be displayed for both symbol and dropped node in the diagram canvas. To provide different tooltip for symbols in the symbol palette and the dropped node in the diagram canvas, then DragDrop event can be utilized. The [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered when a symbol is dragged and dropped from the symbol palette to the drawing area. In the Drop event, you can define the new tooltip for the dropped node by assigning new tooltip content to the Tooltip property of the node. The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas.
@@ -821,6 +822,85 @@ 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 SymbolTooltipTemplate. 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.
+
 ## How to add/remove symbols from palette at runtime
 
 Symbols can be added to palette at runtime by using the public method [AddPaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPaletteItem_System_String_Syncfusion_Blazor_Diagram_NodeBase_System_Boolean_). The following code sample illustrates how to add symbol using AddPaletteItem method.

blazor/diagram/tool-tip.md

@@ -358,18 +358,27 @@ 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 [DiagramTooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Template) for the diagram and the [SymbolTooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Template) for the symbol palette.
 
 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 +400,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
@@ -419,7 +418,18 @@ The following code example illustrates how to add the formatted template content
 @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 +445,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.