Skip to content

Commit a820679

Browse files
IvanDanchevIvanDanchev
authored
docs: add diagram connection text and tooltip info #12712 (#3414)
1 parent 5423708 commit a820679

File tree

2 files changed

+121
-0
lines changed

2 files changed

+121
-0
lines changed

‎components/diagram/connections.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,87 @@ Note the difference between caps and selection handles:
126126
</TelerikDiagram>
127127
````
128128

129+
## Connection Text
130+
131+
The Diagram allows you to display text labels on Connections and control their position and offset from the Connection path. You can configure the text content, color, and precise positioning relative to the Connection.
132+
133+
The text positioning is controlled by two parameters:
134+
135+
* `Offset`&mdash;the distance in pixels between the label and the Connection path
136+
* Position settings that use the following enums:
137+
* `DiagramConnectionsContentPositionHorizontal`&mdash;`Left` or `Right`
138+
* `DiagramConnectionsContentPositionVertical`&mdash;`Top` or `Bottom`
139+
140+
To configure Connection text globally for all Connections, use the `Text`, `Color`, and `Offset` parameters of `<DiagramConnectionDefaultsContent>`, and the `Horizontal` and `Vertical` parameters of `<DiagramConnectionDefaultsContentPosition>`.
141+
142+
To configure the text for a specific Connection, use the `Text`, `Color`, and `Offset` parameters of `<DiagramConnectionContent>`, and the `Horizontal` and `Vertical` parameters of `<DiagramConnectionContentPosition>`.
143+
144+
>caption Setting Connection text with positioning
145+
146+
````RAZOR.skip-repl
147+
<TelerikDiagram>
148+
<DiagramConnections>
149+
<DiagramConnection FromId="1" ToId="2">
150+
<DiagramConnectionStroke />
151+
<DiagramConnectionContent Text="Connection 1" Color="red" Offset="16">
152+
<DiagramConnectionContentPosition Vertical="@DiagramConnectionsContentPositionVertical.Bottom"
153+
Horizontal="@DiagramConnectionsContentPositionHorizontal.Right" />
154+
</DiagramConnectionContent>
155+
</DiagramConnection>
156+
157+
<DiagramConnection FromId="3" ToId="1">
158+
<DiagramConnectionStroke />
159+
<DiagramConnectionContent Text="Connection 3" Color="blue" Offset="10">
160+
<DiagramConnectionContentPosition Vertical="@DiagramConnectionsContentPositionVertical.Top"
161+
Horizontal="@DiagramConnectionsContentPositionHorizontal.Left" />
162+
</DiagramConnectionContent>
163+
</DiagramConnection>
164+
</DiagramConnections>
165+
</TelerikDiagram>
166+
````
167+
168+
## Tooltips
169+
170+
The Diagram allows you to display tooltips when hovering over Connections. Each Connection requires explicit tooltip content configuration through the `Template` parameter.
171+
172+
The available tooltip parameters are:
173+
174+
* `Visible` (bool, default: `false`)&mdash;controls whether the tooltip is displayed on hover
175+
* `Class` (string)&mdash;applies a custom CSS class to the tooltip for styling
176+
* `Template` (RenderFragment)&mdash;defines the custom content to display in the tooltip
177+
178+
>caption Configuring Connection tooltips
179+
180+
````RAZOR.skip-repl
181+
<TelerikDiagram>
182+
<DiagramShapes>
183+
<DiagramShape Id="shape1">
184+
<DiagramShapeContent Text="Shape 1" />
185+
</DiagramShape>
186+
<DiagramShape Id="shape2">
187+
<DiagramShapeContent Text="Shape 2" />
188+
</DiagramShape>
189+
</DiagramShapes>
190+
191+
<DiagramConnections>
192+
<DiagramConnection Id="connection1" FromId="shape1" ToId="shape2">
193+
<DiagramConnectionStroke Color="red" />
194+
<DiagramConnectionContent Text="Connection 1" Color="ff0000" Offset="16">
195+
<DiagramConnectionContentPosition Vertical="@DiagramConnectionsContentPositionVertical.Bottom"
196+
Horizontal="@DiagramConnectionsContentPositionHorizontal.Right" />
197+
</DiagramConnectionContent>
198+
<DiagramConnectionTooltip Class="connection1" Visible="true">
199+
<Template>
200+
<div>
201+
id: 1
202+
</div>
203+
</Template>
204+
</DiagramConnectionTooltip>
205+
</DiagramConnection>
206+
</DiagramConnections>
207+
</TelerikDiagram>
208+
````
209+
129210
## Selection Handles
130211

131212
Selection handles are the additional visual elements that appear at both ends of a Connection when it is selected (clicked). The handles appear on top of the [caps and connectors](slug:diagram-overview#diagram-elements).

‎components/diagram/shapes.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,46 @@ You can customize connectors globally or per shape. Connectors settings are part
207207
</TelerikDiagram>
208208
````
209209

210+
## Tooltips
211+
212+
The Diagram allows you to display tooltips when hovering over Shapes. Each Shape requires explicit tooltip content configuration through the `Template` parameter.
213+
214+
The available tooltip parameters are:
215+
216+
* `Visible` (bool, default: `false`)&mdash;controls whether the tooltip is displayed on hover
217+
* `Class` (string)&mdash;applies a custom CSS class to the tooltip for styling
218+
* `Template` (RenderFragment)&mdash;defines the custom content to display in the tooltip
219+
220+
>caption Configuring Shape tooltips
221+
222+
````RAZOR.skip-repl
223+
<TelerikDiagram>
224+
<DiagramShapes>
225+
<DiagramShape Id="shape1" X="640" Y="240">
226+
<DiagramShapeFill Color="lightgreen" />
227+
<DiagramShapeContent Text="Shape 1" />
228+
<DiagramShapeTooltip Class="shape1" Visible="true">
229+
<Template>
230+
<div>
231+
shape id: 1
232+
</div>
233+
</Template>
234+
</DiagramShapeTooltip>
235+
</DiagramShape>
236+
237+
<DiagramShape Id="shape2" X="-100" Y="90">
238+
<DiagramShapeFill Color="lightblue" />
239+
<DiagramShapeContent Text="Shape 2" Color="red" />
240+
<DiagramShapeTooltip Class="shape2" Visible="true">
241+
<Template>
242+
<div>shape 2</div>
243+
</Template>
244+
</DiagramShapeTooltip>
245+
</DiagramShape>
246+
</DiagramShapes>
247+
</TelerikDiagram>
248+
````
249+
210250
## Styling
211251

212252
The following Shape styling options are available in child tags of `<DiagramShapeDefaults>` and `<DiagramShape>`:

0 commit comments

Comments
 (0)