Popup

Popup is a UI component for displaying contextual information (or even other diagrams) below a certain target element (HTML or SVG).

Learn more about the Popup plugin.

constructor

constructor(options?: Popup.Options)

The ui.Popup constructor accepts several parameters:

content

[optional] The content of the popup. It can be a text or an arbitrary HTML as a string, or an HTML element.

It can also be specified as a function with el (the parent HTML element of the Popup) exposed as a parameter. The parameter can be used, for example, to dynamically calculate a return string or HTML element to be used as the content of the popup, as specified above.

Alternatively, instead of returning a value, the function may append HTML elements directly to el (e.g. by calling el.appendChild(paper.el); using a JointJS paper element). This approach enables appending of JointJS diagrams directly into the ui.Popup element.

target

[required] The target element (either HTML or SVG).

padding

[optional] The gap between the target element an the popup. The default is 20.

position

[optional] The name of the position on the target element to which the popup is attached. The default is 'bottom'.

anchor

[optional] The name of the position on the popup, where it is attached to the target. The default is 'top'. The arrow is rendered with this position by default. If the anchor is 'center' the arrow is not rendered.

arrowPosition

[optional] The optional name of the position on the popup, where the arrow is rendered. The default is anchor position. Use 'none' if you don't want the arrow to be rendered. It accepts all position names except 'center'.

autoClose

[optional] Determines if the popup should be closed if the user clicked outside the area of the popup. The default is true.

scale

[optional] Optional parameter that sets the scale of the context toolbar.

Methods

render()

popup.render(): this;

Render the popup onto the screen.

remove()

popup.remove(): this;

Remove the popup. Usually, you don't have to call this method as the popup is closed automatically if the user clicked outside the area of the popup (unless you set the autoClose option to false).

on()

popup.on(eventName: string, callback: EventHandler, context?: any): this;

Register a handler function that will be called whenever eventName is triggered. The optional context is an object that will be the context of the handler function (the this).

Static Methods

close()

ui.Popup.close(): void;

This is a static method that closes any popup that is currently open.

update()

ui.Popup.update(): void;

This is a static method that updates the position of the opened popup (if any). Call this method if your target element changes its position while you still want to keep the popup opened.

Events

close

Triggered when the popup gets closed.

Types

ArrowPositionName

type ArrowPositionName = 'top' | 'left' | 'bottom' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';

Options

FlashMessage.Options extends ContextToolbar.Options.

interface Options extends ContextToolbar.Options {
        target: mvc.$Element;
        content?: mvc.$HTMLElement | ((el: SVGElement) => void | mvc.$HTMLElement);
        arrowPosition?: ArrowPositionName;
}