Tooltips

JointJS+ provides a Tooltip plugin that enables the ability to display information messages anywhere in the UI.

Installation

Access Tooltip via the ui namespace, and create an instance.

import { ui } from '@joint/plus';

const tooltip = new ui.Tooltip({
    target: '[data-tooltip]',
    direction: 'auto',
    padding: 10
});

There is also a UMD version available

Include joint.ui.tooltip.js and joint.ui.tooltip.css in your HTML:

index.html

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

Access Tooltip through the joint.ui namespace:

index.js

new joint.ui.Tooltip({
    target: '[data-tooltip]',
    direction: 'auto',
    padding: 10
});

How does Tooltip work?

A tooltip can be created with the ui.Tooltip constructor. One instance of ui.Tooltip manages multiple tooltips. Tooltips have configuration for html elements as data attributes. Configuration passed to the constructor becomes global settings for a particular tooltip. A setting defined as a data attribute won't override the global setting defined in the constructor. Newly added elements with a known definition are initialized automatically, right after append.

Common tooltip usage

In this example all the elements with the data attribute tooltip will display tooltip when hovered.

Open Sandbox

Tooltips in Halo

It's useful to show the user a hint on the Halo icon tools. Fortunately, it's very easy.

Notice we use the 'small' className in our example. JointJS+ tooltips come with two built-in sizes for tooltips: small and normal. In order to enable the small version use 'small' as a className.

Open Sandbox