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.