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 tag property. The template for these pop-ups is defined in the GraphComponent's element and is automatically added to the 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 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.