Adding a simple tooltip while firing an event

Developers
1

Hi i need to add a simple tooltip while firing element.hover event of task that contains a text for each task

thanks

2

Please give a little bit more background. What did you try?

4

Thanks for the reply! Very much appreciated
I will try to explain more
we are trying to add tool tip like this
tooltip
that contains ElementsLabel.Label
rather than this shape if the label text is large
tooltip2
thanks :slightly_smiling_face:

5

You’d need to do two things:

  • customize the way we render labels (check BpmnRenderer) for this
  • add a tooltip on top of the element with the full name (pick any tooltip library out there)

You may react to the canvas being changed for repositioning the tooltip via the canvas.viewbox.changed event. For good user experience, I suggest you to hide the tooltip during canvas moving (start indicated via canvas.viewbox.changing event).

Hope this helps.

6

thanks alot i’ll try

7

I did something similar to this recently but also required the ability to have text with HTML tags in the popup. I used bootstrap tooltips (https://getbootstrap.com/docs/4.0/components/tooltips/) and it worked well for our situation.

8

I did it with the help of this link


by passing the canvas while firing element.hover