Class Tooltip

Diagram provides tooltip support while dragging, resizing, rotating a node, and when mouse hovers any Diagram element.

Inheritance
System.Object
EJTagHelper
Tooltip
Inherited Members
System.Object.ToString()
System.Object.Equals(System.Object)
System.Object.Equals(System.Object, System.Object)
System.Object.ReferenceEquals(System.Object, System.Object)
System.Object.GetHashCode()
System.Object.GetType()
System.Object.MemberwiseClone()
Namespace: Syncfusion.JavaScript.DataVisualization.Models.Diagram
Assembly: Syncfusion.EJ.dll
Syntax
public class Tooltip : EJTagHelper

Constructors

Tooltip()

Initializes a new instance of the Tooltip class.

Declaration
public Tooltip()

Properties

Alignment

Gets or sets alignment of tooltip

Declaration
[JsonProperty("alignment")]
public Alignment Alignment { get; set; }
Property Value
Type Description
Alignment

HorizontalAlignment.Center
Examples
            DiagramProperties Model = new DiagramProperties();
           Tooltip Tooltip = new Tooltip() { TemplateId = "mouseovertooltip", Alignment = new Alignment() { Vertical = VerticalAlignment.Bottom, Horizontal = HorizontalAlignment.Center } };
           Node Node = new Node() { Name = "elizabeth", Width = 70, Height = 40, OffsetX = 100, OffsetY = 100, Tooltip = Tooltip };
           Model.Nodes.Add(Node);

Margin

Gets or sets the margin of the tooltip

Declaration
[JsonProperty("margin")]
public Margin Margin { get; set; }
Property Value
Type Description
Margin

Margin
Examples
           DiagramProperties Model = new DiagramProperties();
           Tooltip Tooltip = new Tooltip()
           {
               TemplateId = "mouseovertooltip",
               Margin = new Margin() { Bottom = 10, Right = 10, Top = 10, Left = 10 },
               Alignment = new Alignment() { Vertical = VerticalAlignment.Bottom, Horizontal = HorizontalAlignment.Center }
           };
           Node Node = new Node() { Name = "elizabeth", Width = 70, Height = 40, OffsetX = 100, OffsetY = 100, Tooltip = Tooltip };
           Model.Nodes.Add(Node);

RelativeMode

Gets or sets whether the tooltip should be shown at the mouse position or around node.

Declaration
[JsonProperty("relativeMode")]
[JsonConverter(typeof(StringEnumConverter))]
public RelativeMode RelativeMode { get; set; }
Property Value
Type Description
RelativeMode

RelativeMode.Object
Examples
           
           DiagramProperties Model = new DiagramProperties();
           Tooltip Tooltip = new Tooltip()
           {
               TemplateId = "mouseovertooltip",
               RelativeMode = RelativeMode.Mouse
           };
           Node Node = new Node() { Name = "elizabeth", Width = 70, Height = 40, OffsetX = 100, OffsetY = 100, Tooltip = Tooltip };
           Model.Nodes.Add(Node);

TemplateId

Gets or sets the id of the template for binding

Declaration
[JsonProperty("templateId")]
public string TemplateId { get; set; }
Property Value
Type Description
System.String

String.Empty
Examples
       <script type="text/x-jsrender" id="mouseovertooltip">
       <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
           <span style="padding: 5px;"> {{:name}} </span>
       </div>
       </script> 
               DiagramProperties Model = new DiagramProperties();
               Tooltip Tooltip = new Tooltip() { TemplateId = "mouseovertooltip", Alignment = new Alignment() { Horizontal = HorizontalAlignment.Center, Vertical = VerticalAlignment.Bottom } };
               Node Node = new Node()
               {
                   Name = "node",
                   Tooltip = Tooltip
               };
               Model.Nodes.Add(Node);