How to add a tooltip using matTooltip or overlays

Developers
1

Hi!

I wanted to add a simple tooltip to my BpmnJSViewer.
I want the tooltip to disappear, so overlays was not a solution for me.

I was trying something like this:
BpmnJSViewer.get(‘elementRegistry’)get(elementId).matTooltip = element.tooltipText;

But it’s not working.

How can I add tooltips to a specific elementId?

2

Hello!

You can use Tooltip module for that. It’s a built-in module for diagram-js, diagram-js is used by bpmn-js.

Here’s a working example: https://codesandbox.io/s/vigilant-greider-6o11k?file=/src/index.js

3

I’m getting.

ERROR Error: No provider for “tooltips”! (Resolving: tooltips)
at error (bpmn-navigated-viewer.development.js:1775)

For this line:
const tooltips = this.bpmnJS.get(‘tooltips’);

I tired this with the BpmnJSViewer (not the Modeler). With the modeller it works, but the viewer doesn’t have any tooltip option.

4

So, therefore, this module is not available for the Viewer

5

@GaborCsikos

As Niklas mentioned, this module is not available for Viewer by default, however you can add it to your Viewer as an additional module.

I’ve updated the example, as you can see it works now with the Viewer as well: https://codesandbox.io/s/vigilant-greider-6o11k?file=/src/index.js

2 Likes