892868: Tooltip for Port #4802
892868: Tooltip for Port #4802
Conversation
|
Build Status: INPROGRESS 🔃 |
|
CI Status: SUCCESS ✅ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
rebuild |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
RamyaSubramaniSF4537
force-pushed
the
Es-892868-PortTooltip
branch
from
218a1a0 to
3a1f66e
Compare
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
blazor/diagram/ports/interaction.md
Outdated
|
|
||
| ## How to set tooltip for ports | ||
|
|
||
| The diagram provides support to show a tooltip when the mouse hovers over any port. The tooltip can be customized for each port.To achieve this, the tooltip property of the diagram model must be configured to contain the tooltip [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Content) and to [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position) it appropriately. By default, tooltips are not displayed; you need to add the tooltip as shown in the following example. |
There was a problem hiding this comment.
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.
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 and Position it appropriately.
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:
blazor/diagram/ports/interaction.md
Outdated
|
|
||
| ## How to set sticky tooltip for ports | ||
|
|
||
| With this mode set to `true`, Tooltips for ports can be made to show up on the screen as long as the close icon is pressed. In this mode, close icon is attached to the Tooltip located at the top right corner. This mode can be enabled or disabled using the `IsSticky` property in tooltip. By default, the value of the IsSticky property is set to false. |
There was a problem hiding this comment.
How to Set Sticky Tooltip for Ports
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.
To enable or disable this sticky mode, use the IsSticky property in the tooltip configuration. By default, the IsSticky property is set to false.
Note: 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.
The following code example demonstrates how to set the IsSticky property to true for the ports:
blazor/diagram/user-handle.md
Outdated
|
|
||
| ### How to set tooltip for user handle | ||
|
|
||
| The diagram supports displaying tooltips when the mouse hovers over any [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_UserHandle). To achieve this, the tooltip property of the diagram model must be configured to contain the tooltip [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Content) and to [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position) it appropriately. This ensures that when users hover over a handle, relevant information is displayed at the correct position relative to the handle. By default, tooltips are not displayed; you need to add the tooltip as shown in the following example. |
There was a problem hiding this comment.
How to Set Tooltip for User Handles
The Diagram component supports displaying tooltips when the mouse hovers over any UserHandle. To achieve this, you need to configure the Tooltip property of the UserHandle to include the tooltip Content and set its Position appropriately. This configuration ensures that relevant information is displayed at the correct position relative to the handle when users hover over it.
By default, tooltips are not displayed. You need to explicitly configure the tooltip settings as shown in the following example:
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
rebuild |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
rebuild |
|
Build Status: INQUEUE 🕒 |
|
The CI Job is already running for this Pull Request/Merge Approved with latest commit id. You cannot trigger the duplicate job for same. |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: SUCCESS ✅ |
Added documentation for tooltip support for Port