Popup

JointJS+ provides a Popup plugin that enables the ability to display contextual information (or even other diagrams) below a certain target element (HTML or SVG).

Installation

Access Popup via the ui namespace, and create an instance. Then, specify the content, and call the render() method in order to open the popup.

import { dia, shapes, ui } from '@joint/plus';

const element = new shapes.standard.Rectangle({
    position: { x: 10, y: 10 },
    size: { width: 80, height: 50 },
    attrs: { label: { text: 'Rect' }}
});

const elementView = element.findView(paper);

new ui.Popup({
    content: '<b>I am a ui.Popup</b>',
    target: elementView.el
}).render();

There is also a UMD version available

Include joint.ui.popup.js and joint.ui.popup.css in your HTML. You should also include joint.ui.contextToolbar.js and joint.ui.contextToolbar.css dependencies. Popup inherits from ContextToolbar.

index.html

<link rel="stylesheet" type="text/css" href="joint.ui.contextToolbar.css">
<link rel="stylesheet" type="text/css" href="joint.ui.popup.css">
<script src="joint.js"></script>
<script src="joint.ui.contextToolbar.js"></script>
<script src="joint.ui.popup.js"></script>

Access Popup through the joint.ui namespace:

index.js

const element = new joint.shapes.standard.Rectangle({
    position: { x: 10, y: 10 },
    size: { width: 80, height: 50 },
    attrs: { label: { text: 'Rect' }}
});

const elementView = element.findView(paper);

const popup = new joint.ui.Popup({
    content: '<b>I am a ui.Popup</b>',
    target: elementView.el
});

popup.render();

How does Popup work?

There can always be only one popup opened at a time. This is automatically handled by the ui.Popup component which simplifies the process, and makes sure you don't have to keep track of opened popups yourself. This component is very similar to the ui.ContextToolbar component (in fact, it inherits from it) with the only difference that ui.Popup does not contain a set of buttons, but arbitrary HTML (which might even contain another diagram).

Common popup patterns

There are some common patterns when working with popups. While the following example doesn't cover every possibility, you will certainly get some inspiration for working with the Popup plugin. Opening popups when the user clicks, custom positions, and embedded content are just some of the use cases shown here.

Open Sandbox

Appearance

You can alter the arrow appearance by customizing CSS variables inside the .joint-popup class. The available variables are --arrow-width, --arrow-mask-width, --arrow-color, --arrow-mask-color.