In Graphical User Interface (GUI), the tooltip is a message that is displayed when mouse hovers over an element. The diagram provides tooltip support while dragging, resizing, rotating a node, and when the mouse hovers any diagram element.
By default, diagram displays a tooltip to provide the size, position, and angle related information while dragging, resizing, and rotating. The following images illustrate how the diagram displays the node information during an interaction.
Drag | Resize | Rotate |
---|---|---|
![]() |
![]() |
![]() |
The diagram provides support to show tooltip when the mouse hovers over any node/connector.
To show tooltip on mouse over, the tooltip
property of diagram model needs to be set with the tooltip content
and position
as shown in the following example.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
OffsetX = 100,
OffsetY = 100,
// Set constraints for the node
constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
Tooltip = new DiagramDiagramTooltip() { Content = "Nodes", Position = "TopLeft"}
});
ViewBag.nodes = nodes;
string position = "TopLeft";
ViewBag.position = position;
return View();
}
}
}
The tooltip on mouse over can be disabled by assigning the tooltip
property as null
. The following code example illustrates how to disable the mouse over tooltip at runtime.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
OffsetX = 100,
OffsetY = 100,
});
ViewBag.nodes = nodes;
string position = "TopLeft";
ViewBag.position = position;
return View();
}
}
}
The tooltip can be customized for each node and connector. Remove the InheritTooltip option from the constraints
of that node/connector. The following code example illustrates how to customize the tooltip for individual elements.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
OffsetX = 100,
OffsetY = 100,
Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
Tooltip = new DiagramDiagramTooltip() { Content = "Nodes", Position = "TopLeft", RelativeMode= TooltipRelativeMode.Object}
});
ViewBag.nodes = nodes;
string position = "TopLeft";
ViewBag.position = position;
return View();
}
}
}
Any text or image can be added to the tooltip, by default. To customize the tooltip layout or to create your own visualized element on the tooltip, template can be used.
The following code example illustrates how to add formatted HTML content to the tooltip.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
string position = "TopLeft";
ViewBag.position = position;
ViewBag.getContent = "getContent";
return View();
}
}
}
function getContent() {
var tooltipContent = document.createElement('div');
tooltipContent.innerHTML = '<div style="background-color: #f4f4f4; color: black; border-width:1px;border-style: solid;border-color: #d3d3d3; border-radius: 8px;white-space: nowrap;"> <span style="margin: 10px;"> Tooltip !!! </span> </div>';
return tooltipContent;
}
The diagram provides support to show tooltip around the node/connector that is hovered by the mouse. The tooltip can be aligned by using the position
property of the tooltip.
The relativeMode
property of the tooltip defines whether the tooltip has to be displayed around the object or at the mouse position.
The following code example illustrates how to position the tooltip around object.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
OffsetX = 100,
OffsetY = 100,
Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
Tooltip = new DiagramDiagramTooltip() { Content = "Nodes", Position = "TopLeft", RelativeMode= TooltipRelativeMode.Object}
});
ViewBag.nodes = nodes;
string position = "TopLeft";
ViewBag.position = position;
return View();
}
}
}
To display the tooltip at mouse position, need to set mouse option to the relativeMode
property of the tooltip.
The following code example illustrates how to show tooltip at mouse position.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
OffsetX = 100,
OffsetY = 100,
Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
Tooltip = new DiagramDiagramTooltip() { Content = "Nodes", Position = "TopLeft", RelativeMode= TooltipRelativeMode.Mouse}
});
ViewBag.nodes = nodes;
string position = "TopLeft";
ViewBag.position = position;
return View();
}
}
}
To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the animation
property. The animation property also allows you to set delay, duration, and various other effects of your choice.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "#6BA5D7",
StrokeColor = "White"
},
OffsetX = 100,
OffsetY = 100,
Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
Tooltip = new DiagramDiagramTooltip() { Content = "Nodes", Position = "TopLeft", RelativeMode= TooltipRelativeMode.Object}
});
ViewBag.nodes = nodes;
string position = "TopLeft";
ViewBag.position = position;
return View();
}
}
}