🎉 JointJS has new documentation! 🥳

JointJS+ ContextToolbar


ui.ContextToolbar is a UI widget for displaying context toolbars (usually a set of buttons) below a certain target element (HTML or SVG). There can always be only one context toolbar opened at a time. This is automatically handled by the ui.ContextToolbar component which simplifies the process and makes sure you don't have to keep track of opened context toolbars yourself.


Include joint.ui.contextToolbar.js and joint.ui.contextToolbar.css files to your HTML:

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


Create an object of joint.ui.ContextToolbar type, add tool buttons and call the render() method in order to open the context toolbar.

var ct = new joint.ui.ContextToolbar({
    tools: [
        { action: 'yes', content: 'Yes' },
        { action: 'no', content: 'No' },
        { action: 'maybe', content: 'Maybe' },
        { action: 'sure', content: 'Sure' }
    target: this

ct.on('action:yes', function() { alert('Yes') });
ct.on('action:no', function() { alert('No') });
ct.on('action:maybe', function() { alert('Maybe') });
ct.on('action:sure', function() { alert('Sure') });


A common usage is to open the context toolbar on click on a certain element (either HTML or SVG):

$('circle').on('click', function() {

    var circle = this;

    var ct = new joint.ui.ContextToolbar({
	tools: [
	    { action: 'hide', content: 'Hide' },
	    { action: 'info', content: 'Info' },
	    { action: 'remove', content: 'Remove' }
        target: circle

    ct.on('action:hide', ct.remove, ct);
    ct.on('action:remove', function() {
    ct.on('action:info', function() {
        alert('This is an SVG circle');



The following table lists options that you can pass to the ui.ContextToolbar constructor function:

tools An array of tools. Each tool is an object that can have the following properties:
actionThe name of the action. This action is then triggered on the context toolbar object so that you can react on it later.
contentThe content of the button. It can be a text or an arbitrary HTML.
iconOptionally, instead of passing a content, you can just pass a path to an image.
attrsAn object with attributes that will be applied on the generated button. Useful for adding your own custom attributes such as { 'data-tooltip': 'My Tooltip'}.
target The target element (either HTML or SVG).
padding The gap between the target element an the context toolbar. Default is 20.
autoClose Determines if the context toolbar should be closed if the user clicked outside of the area of the context toolbar. Default is true.
vertical When set to true the toolbar arrange tools from top to bottom instead of left to right. Default is false.


render() Render the context toolbar onto the screen.
remove() Remove the context toolbar. Usually, you don't have to call this method as the context toolbar is closed automatically if the user clicked outside of the area of the context toolbar (unless you set the autoClose option to false).
on(event, handler [, context]) Register a handler function that will be called whenever event is triggered. The optional context is an object that will be the context of the handler function (the this).
joint.ui.ContextToolbar.close() This is a static method that closes any context toolbar that is currently open.
joint.ui.ContextToolbar.update() This is a static method that updates the position of the opened context toolbar (if any). Call this method if you target element changes its position while you still want to keep the context toolbar opened.


The ui.ContextToolbar object triggers events that correspond to the actions that you defined in the tools array. Events can be handled by using the on() method (see above).

action:[action] Triggered when the user clicks on one of the buttons in the context toolbar.