HTML Popup Demo
This demo shows HTML pop-up panels that display additional information about a clicked
node or edge.
The pop-up is displayed in the GraphComponent above the graph items but
below the scrollbars, and rendered zoom-invariant with a fixed size.
In this demo, a pop-up is shown when clicking a node or an edge. The data are
retrieved from a graph item's ITagOwner#tag property. The template for
these pop-ups is defined in the GraphComponent's div and is automatically added to the
CanvasComponent#overlayPanel element by the GraphComponent's constructor.
In general, a pop-up can contain arbitrary HTML content, it can be created through
JavaScript code or copied over from another part of the DOM, and it can be manually added
to the CanvasComponent#overlayPanel
of the GraphComponent at any time.
Things to Try
- Click a node to show information about the person.
- Click an edge to display information about the connection.
- Take a look at the code, especially
HTMLPopupSupport.