Skip to content

Commit d6444a6

Browse files
RamyaSF4537RamyaSF4537
committed
892868: Tooltip for Port
1 parent c7a85d4 commit d6444a6

File tree

7 files changed

+366
-373
lines changed

7 files changed

+366
-373
lines changed

‎blazor/diagram/connectors/segments/bezier/bezier.md‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -246,11 +246,13 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
246246

247247
### How to customize Bezier Segment Thumb Shape
248248

249-
The bezier connector can have any number of segments in between the source and the target point. By default, these segments are rendered as circles . The `Shape` property of `SegmentThumbSettings` allows to define the shape of the segment thumb.
249+
The Bezier connector can have multiple segments between the source and target points. By default, these segments are rendered as circles, but this can be customized either globally or for individual connectors using the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
250250

251-
This feature ensures that the shape is updated regardless of whether the `InheritSegmentThumbShape` enum value is added to the `Constraints` property of the diagram. If you apply the `InheritSegmentThumbShape` constraints, the shape will be updated at the diagram level. Without these constraints, the shape will be updated at the connector level.
251+
To change the segment thumb shape for all Bezier connectors, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) property of the SfDiagramComponent class and set the Shape property to the desired shape.
252252

253-
To make the shapes visible, ensure that the `DragSegmentThumb` enum is added to the connector's constraints. The following predefined shapes are provided:
253+
To customize the segment thumb shape for a specific connector, first disable the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraint. Then, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) property of the Connector class, specifying the desired shape using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html#Syncfusion_Blazor_Diagram_SegmentThumbSettings_Shape) property of the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
254+
255+
The following predefined shapes are provided:
254256

255257
| Shape name | Shape |
256258
|-------- | -------- |
@@ -347,4 +349,7 @@ The following code example illustrates how to create a customized bezier segment
347349
```
348350
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/SegmentShape).
349351

350-
![Connector with Bezier Segment Shape and Style in Blazor Diagram](../../../images/BezierSegmentShape1.png)
352+
![Connector with Bezier Segment Shape and Style in Blazor Diagram](../../../images/BezierSegmentShape1.png)
353+
354+
>Note: This feature ensures that the shape is updated regardless of whether the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) enum value is added to the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the diagram. If you apply the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraints, the shape will be updated at the diagram level. Without these constraints, the shape will be updated at the connector level.
355+
To make the shapes visible, ensure that the [DragSegmentThumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragSegmentThumb) enum is added to the connector's constraints.

‎blazor/diagram/connectors/segments/orthogonal.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,9 +157,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
157157

158158
## How to customize Orthogonal Segment Thumb Shape
159159

160-
The [Orthogonal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Orthogonal) connector in the Syncfusion Blazor Diagram component supports an arbitrary number of segments between its source and target points. By default, these [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Segments) are displayed with a circular shape in Grey color.
160+
The Orthogonal connector can have multiple segments between the source and target points. By default, these segments are rendered as circles, but this can be customized either globally or for individual connectors using the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
161161

162-
You can customize the appearance of these segments using the `SegmentThumbSettings` property, which allows you to choose from several predefined shapes. However, to ensure that these shapes are visible, you must include the `DragSegmentThumb` enum in the connector's constraints.
162+
To change the segment thumb shape for all Orthogonal connectors, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) property of the SfDiagramComponent class and set the Shape property to the desired shape.
163+
164+
To customize the segment thumb shape for a specific connector, first disable the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraint. Then, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) property of the Connector class, specifying the desired shape using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html#Syncfusion_Blazor_Diagram_SegmentThumbSettings_Shape) property of the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
163165

164166
The following predefined shapes are available for segment thumbs:
165167

@@ -238,3 +240,5 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
238240

239241
![Editing Orthogonal Segment in Blazor Diagram](../../images/OrthogonalThumbSettings1.png)
240242

243+
>Note: This feature ensures that the shape is updated regardless of whether the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) enum value is added to the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the diagram. If you apply the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraints, the shape will be updated at the diagram level. Without these constraints, the shape will be updated at the connector level.
244+
To make the shapes visible, ensure that the [DragSegmentThumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragSegmentThumb) enum is added to the connector's constraints.

‎blazor/diagram/connectors/segments/straight.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -102,13 +102,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
102102

103103
### How to customize Straight Segment Thumb Shape
104104

105-
The straight connector does not have segments by default, featuring only the source and target thumbs. However, you can create multiple segments between the source and target points by using the `Segments` property. By default, these segments are rendered as circles.
105+
The Straight connector can have multiple segments between the source and target points. By default, these segments are rendered as circles, but this can be customized either globally or for individual connectors using the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
106106

107-
You can customize the shape of these segment thumbs using the `Shape` property of the `SegmentThumbSettings` class.
107+
To change the segment thumb shape for all Straight connectors, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) property of the SfDiagramComponent class and set the Shape property to the desired shape.
108108

109-
This customization is effective whether or not the `InheritSegmentThumbShape` enum value is included in the `Constraints` property of the diagram. If you apply the `InheritSegmentThumbShape` constraint, the shape specified at the diagram level will be applied to all segment thumbs within the diagram. Without this constraint, the shape will be applied at the individual connector level.
110-
111-
To ensure that the customized shapes are visible, you must include the `DragSegmentThumb` enum in the connector's constraints.
109+
To customize the segment thumb shape for a specific connector, first disable the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraint. Then, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) property of the Connector class, specifying the desired shape using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html#Syncfusion_Blazor_Diagram_SegmentThumbSettings_Shape) property of the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
112110

113111
The following predefined shapes are available for segment thumbs:
114112

@@ -204,3 +202,6 @@ The following code example illustrates how to create a customized bezier segment
204202
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/SegmentShape)
205203

206204
![Connector with Straight Segment Shape and Style in Blazor Diagram](../../images/StraightSegmentShape1.png)
205+
206+
>Note: This feature ensures that the shape is updated regardless of whether the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) enum value is added to the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the diagram. If you apply the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraints, the shape will be updated at the diagram level. Without these constraints, the shape will be updated at the connector level.
207+
To make the shapes visible, ensure that the [DragSegmentThumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragSegmentThumb) enum is added to the connector's constraints.

‎blazor/diagram/grid-lines.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
287287

288288
### How to customize the Snap line style
289289

290-
The `SnapLineStyle` property allows you to define the style of the snap line used in the diagram. By customizing the SnapLineStyle property, you can enhance the visual contrast and visibility of these guides, making it easier to achieve accurate alignment. Using this property we can customize snap line color, stroke width, stroke dash array and opacity. By default the snap line color is set to `'#07EDE1'`.
290+
The [SnapLineStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_SnapLineStyle) property of the [SnapSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html) class allows you to adjust the appearance of snapping lines to enhance visibility or match specific aesthetic preferences. By customizing this property, you can modify the color, stroke width, stroke dash array, and opacity of the snap lines. These adjustments improve visual contrast, making it easier to align objects with precision. By default, the snap line color is set to '#07EDE1'.
291291

292292
The following code example illustrates how to customize the snap line style.
293293

‎blazor/diagram/ports/interaction.md‎

Lines changed: 0 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -161,145 +161,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
161161

162162
![Drawing Bezier Port Connection in Blazor Diagram](../images/blazor-diagram-draw-port-connection-bezier.gif)
163163

164-
## How to set tooltip for ports
165-
166-
The Diagram component provides support for showing or hiding tooltips when the mouse hovers over any port. You can customize the tooltip for each port individually.
167-
168-
To set a tooltip for a port, you need to configure the Tooltip property of the port. This property allows you to define the tooltip [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Content) and [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position) it appropriately.
169-
170-
By default, tooltips are not displayed. To display a tooltip, you must explicitly configure the tooltip settings for each port as shown in the following example:
171-
172-
173-
```cshtml
174-
@using Syncfusion.Blazor.Diagram
175-
<SfDiagramComponent Width="1000px" Height="500px" Nodes="@nodes" />
176-
@code
177-
{
178-
DiagramObjectCollection<Node> nodes;
179-
180-
protected override void OnInitialized()
181-
{
182-
nodes = new DiagramObjectCollection<Node>();
183-
Node node = new Node()
184-
{
185-
ID = "node1",
186-
OffsetX = 250,
187-
OffsetY = 250,
188-
Width = 100,
189-
Height = 100,
190-
Style = new ShapeStyle()
191-
{
192-
Fill = "#6495ED",
193-
StrokeColor = "white"
194-
},
195-
Ports = new DiagramObjectCollection<PointPort>()
196-
{
197-
new PointPort(){
198-
ID="Port1",
199-
Style = new ShapeStyle(){ Fill = "gray" },
200-
Offset = new DiagramPoint() { X = 1, Y = 0.5 },
201-
Visibility = PortVisibility.Visible,
202-
Tooltip = new DiagramTooltip(){ Content = "OutConnectPort"},
203-
Constraints = PortConstraints.Default | PortConstraints.Draw
204-
}
205-
}
206-
};
207-
nodes.Add(node);
208-
Node node2 = new Node()
209-
{
210-
ID = "node2",
211-
OffsetX = 450,
212-
OffsetY = 250,
213-
Width = 100,
214-
Height = 100,
215-
Style = new ShapeStyle()
216-
{
217-
Fill = "#6495ED",
218-
StrokeColor = "white"
219-
},
220-
Ports = new DiagramObjectCollection<PointPort>()
221-
{
222-
new PointPort()
223-
{
224-
ID="Port2",
225-
Style = new ShapeStyle(){ Fill = "gray" },
226-
Offset = new DiagramPoint() { X = 0, Y = 0.5},
227-
Visibility = PortVisibility.Visible,
228-
Tooltip = new DiagramTooltip(){ Content = "InConnectPort"},
229-
Constraints = PortConstraints.Default | PortConstraints.Draw
230-
}
231-
}
232-
};
233-
nodes.Add(node2);
234-
}
235-
}
236-
```
237-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/TooltipForSpecificPort)
238-
239-
![ToolTip During hover the port](../images/PortTooltip.gif )
240-
241-
For more information about tooltip, refer to [Tooltip](https://blazor.syncfusion.com/documentation/diagram/tool-tip)
242-
243-
## How to set sticky tooltip for ports
244-
245-
You can configure tooltips for ports to remain visible until the close icon is pressed. This feature is known as a "sticky" tooltip. When sticky mode is enabled, a close icon appears at the top right corner of the tooltip, allowing users to manually close it.
246-
247-
To enable or disable this sticky mode, use the `IsSticky` property in the tooltip configuration. By default, the `IsSticky` property is set to `false`.
248-
249-
N> The tooltip will have an open and close state whenever the mouse hovers over different diagram elements. Only one "sticky" tooltip can be visible in the diagram at a time.
250-
251-
The following code example demonstrates how to set the `IsSticky` property to `true` for the ports:
252-
253-
```cshtml
254-
@using Syncfusion.Blazor.Diagram
255-
@using Syncfusion.Blazor.Popups
256-
@using Syncfusion.Blazor.Buttons
257-
<SfDiagramComponent @ref="@diagram" Width="1000px" Height="500px" Nodes="@nodes" />
258-
@code
259-
{
260-
//Define diagram's nodes collection
261-
DiagramObjectCollection<Node> nodes;
262-
//Reference the diagram
263-
SfDiagramComponent diagram;
264-
protected override void OnInitialized()
265-
{
266-
//Intialize diagram's nodes collection
267-
nodes = new DiagramObjectCollection<Node>();
268-
Node node = new Node()
269-
{
270-
ID = "node1",
271-
OffsetX = 100,
272-
OffsetY = 100,
273-
Width = 100,
274-
Height = 100,
275-
Style = new ShapeStyle()
276-
{
277-
Fill = "#6495ED",
278-
StrokeColor = "white"
279-
},
280-
Tooltip = new DiagramTooltip() { Content = "NodeContent", IsSticky = true },
281-
Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
282-
Ports = new DiagramObjectCollection<PointPort>()
283-
{
284-
new PointPort(){
285-
ID="Port1",
286-
Style = new ShapeStyle(){ Fill = "gray" },
287-
Offset = new DiagramPoint() { X = 1, Y = 0.5 },
288-
Visibility = PortVisibility.Visible,
289-
Tooltip = new DiagramTooltip(){ Content = "PortContent" , IsSticky = true},
290-
Constraints = PortConstraints.Default | PortConstraints.Draw
291-
}
292-
},
293-
};
294-
nodes.Add(node);
295-
}
296-
}
297-
```
298-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/)
299-
300-
![ToolTip During hover the ports with Stikcy Mode](../images/PortIsSticky.png)
301-
302-
For more information about tooltip, refer to [Tooltip](https://blazor.syncfusion.com/documentation/diagram/tool-tip)
303164

304165
## See also
305166

0 commit comments

Comments
 (0)