CSS / Styling via CSS

Styling via CSS

Using CSS to style the artifacts that jsPlumb creates is a lot more flexible than using paintStyle or hoverPaintStyle.

On this page we'll first run through the default CSS classes that jsPlumb attaches, followed by a quick explanation of how to attach your own, and then we'll discuss how to style SVG.

The information on this page pertains both to the Community edition, and to the Surface widget used by the Toolkit edition.


One thing you can - and should - use CSS for, regardless of the renderer, is z-index. Every connection, endpoint and overlay in jsPlumb adds some element to the UI, and you should take care to establish appropriate z-indices for each of these, in conjunction with the nodes/groups in your application.


By default, jsPlumb adds a specific class to each of the three types of elements it creates (These class names are exposed on the jsPlumb object and can be overridden if you need to do so - see the third column in the table)

ComponentCSS ClassjsPlumb Member
Connectorjtk-connectorconnectorClass
Connector Outlinejtk-connector-outlineconnectorOutlineClass (SVG only)
Endpointjtk-endpointendpointClass
Endpoint when fulljtk-endpoint-fullendpointFullClass
Overlayjtk-overlayoverlayClass

In a simple UI, you can set appropriate z-index values for these classes. The jsPlumb demo pages, for instance, typically use a class of .window for the nodes in each demo page, and the z-index of the UI is controlled with CSS rules like this:

.window { z-index:20; }
.jtk-connector { z-index:4; }
.jtk-endpoint { z-index:5; }
.jtk-overlay { z-index:6; }

jsPlumb assigns these classes on both connectors and endpoints when specific user interactivity occurs:

ActivityCSS ClassjsPlumb MemberDescription
Mouse Hoverjtk-hoverhoverClassAssigned to both Connectors and Endpoints when the mouse is hovering over them
Connection Dragjtk-draggingdraggingClassAssigned to a Connection when it is being dragged (either a new Connection or an existing Connection)
Element Draggingjtk-element-draggingelementDraggingClassAssigned to all Connections whose source or target element is currently being dragged, and to their Endpoints.
Source Element Draggingjtk-source-element-draggingsourceElementDraggingClassAssigned to all Connections whose source element is being dragged, and to their Endpoints
Target Element Draggingjtk-target-element-draggingtargetElementDraggingClassAssigned to all Connections whose target element is being dragged, and to their Endpoints
Anchor Class***jtk-endpoint-anchor-***endpointAnchorClassPrefixAssigned to Endpoints, and their associated elements, that have either a static Anchor with an associated class, or a Dynamic Anchor whose individual locations have an associated CSS class. The `***` suffix in the class name above is the associated class. Note that this class is added to both the artefact that jsPlumb creates and also the element on which the Endpoint resides, so you will normally have to build a selector with more criteria than just this class in order to target things properly. See the documentation regarding Anchors for a discussion of this.
Drop Allowed on Endpointjtk-endpoint-drop-allowedendpointDropAllowedClassAssigned to an Endpoint when another Endpoint is hovering over it and a drop would be allowed
Drop Forbidden on Endpointjtk-endpoint-drop-forbiddenendpointDropForbiddenClassAssigned to an Endpoint when another Endpoint is hovering over it and a drop would not be allowed
Connection Hoverjtk-source-hoverhoverSourceClassAssigned to the source element in a Connection when the mouse is hovering over the Connection
Connection Hoverjtk-target-hoverhoverTargetClassAssigned to the target element in a Connection when the mouse is hovering over the Connection
Dragjtk-drag-selectdragSelectClassAssigned to the document body whenever a drag is in progress. It allows you to ensure document selection is disabled - see [here](home#dragSelection)
Source disablejtk-source-disabled-Assigned to an element that was configured with `makeSource` and was subsequently disabled via `setEnabled(el, false)`.
Target disablejtk-target-disabled-Assigned to an element that was configured with `makeTarget` and was subsequently disabled via `setEnabled(el, false)`.

jsPlumb puts a jtk-drag-select class on the body that you can use to disable the default browser behaviour of selecting DOM elements when dragging.

A suitable value for this (from the jsPlumb demos) is:

.jtk-drag-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;    
}

In addition to the default CSS classes, endpoints and connections support the following two parameters:

  • cssClass - class(es) to set on the display elements
  • hoverClass - class(es) to set on the display elements when in hover mode

In the Toolkit edition, these are specified in endpoint and connector definitions inside your view, for instance:

view:{
    edges:{
        "someEdgeType":{
            endpoint:[ "Dot", { cssClass:"foo" }],
            connector:[ "Straight", cssClass:"foo", hoverClass:"fooHover" ]
        }
    }    
}

In addition, endpoint definitions allow you to specify what these classes will be for any edges that are dragged from them:

  • connectorClass - class(es) to set on the display elements of Connections
  • connectorHoverClass - class(es) to set on the display elements of Connections when in hover mode
view:{
    edges:{
        "someEdgeType":{
            endpoint:[ "Dot", { cssClass:"foo", connectorClass:"foo", connectorHoverClass:"fooHover" }],
            connector:"Straight"
        }
    }    
}

These parameters should be supplied as a String; they will be appended as-is to the class member, so feel free to include multiple classes. jsPlumb won't even know.


Edges

Edges in jsPlumb consist of a parent svg element, inside of which there are one or more path elements, depending on whether or not you have specified an outlineStyle. To target the path element for some edge, you need a rule like this:

svg path {
  stroke:red;
}

Taking the "foo" cssClass from before as a starting point, you might do something like this:

view:{
    edges:{
        "someEdgeType":{
            endpoint:[ "Dot", { cssClass:"foo" }],
            connector:[ "Straight", cssClass:"foo", hoverClass:"fooHover" ]
        }
    }    
}

CSS:

svg.foo path {
  stroke:red;
  stroke-width:3;
}

You might be thinking to yourself, why have the svg and path elements in this? In fact they are perhaps not required: they're just there to call out the fact that this is a style on an SVG connector.

Endpoints

SVG Endpoints created by jsPlumb consist of a div, inside of which is an svg parent element, inside of which there is some shape, the tag name of which depends on the type of Endpoint:

Endpoint TypeSVG Shape
Rectanglerect
Dotcircle

So you can choose, when writing CSS rules for these, whether or not you specify the shape exactly, or just leave it up to a wildcard:

view:{
    edges:{
        "someEdgeType":{
            endpoint:[ "Dot", { cssClass:"foo" }],
            connector:[ "Straight", cssClass:"foo", hoverClass:"fooHover" ]
        }
    }    
}

CSS:

.foo svg circle {
  fill:red;
  stroke:yellow;
}

...or:

.foo svg * {
  fill:red;
  stroke:yellow;
}

For a full discussion of the properties you can configure on an SVG element via CSS, we refer you to the SVG spec.