Show emojis below elements

[DarkMagus]

Introduction

I would like to show emojis (or tags as we called them here) placed just below the graph elements. The user can add/remove as many as they wish as shown in the below image:

When the user hover on specific emoji, a tooltip is shown with associated name as show below:

What is the best way to achieve the above using JointJS+?
I am thinking about elementTools but I am already using them elsewhere in my app, and from what I understood elementTools can be hidden and shown together, therefore will interfere with the already implemented elementTools

Thanks lot

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

Use the list highlighter.

Examples:
https://www.jointjs.com/demos/icons
https://www.jointjs.com/demos/dynamic-status-icons

You can use ui.Stencil to drag and drop icons on the elements (intercept the default behavior and add the new icon instead).

Example:
https://www.jointjs.com/demos/drop-stencil-element-as-shape-icon

[kumilingus]

It probably works fine, but you add 2 event listeners for each icon as opposed to the constant 2 listeners created by the tooltip. It's not very memory efficient.

I didn't mean for you to share your source code. Provide us with an example code that demonstrates the problem, and anyone can simply copy it and run it.

[DarkMagus]

@kumilingus You are right regarding the memory consumption specially with regard to the use of anonymous handler functions. There is a way that results in smaller memory consumption by using a normal function instead of anonymous handler functions.
See Memory issues here https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

The tooltip handling event is just not working for me. I will try to create a simple react project to outline the issue and send it to you.

Thanks

[DarkMagus]

@kumilingus
Hi Roman - I found why the tooltip did not work. By adding rootTarget as follow:

const tooltip = new joint.ui.Tooltip({
    rootTarget: document.body,
    target: '[data-tooltip]',
    position: joint.ui.Tooltip.TooltipPosition.Top,
    padding: 10,
});

with rootTarget being added, I no longer need the addEventListner for every listItem

[kumilingus]

Great! My bad for leaving that out of my suggestion.

[DarkMagus]

Thanks lot Roman for your advices and support. I do not regret advising my client to buy JointJS+ licenses

[DarkMagus]

@kumilingus
Hi Roman - Is it possible to move an emoji around the element?

Thanks

[kumilingus]

What do you mean? Do you want the user to be able to drag the emoji over the element (then why?), or to be able to copy the emoji by dropping it on other elements?
Please elaborate.

[DarkMagus]

I want the user to be able to drag the emoji over the element. why? this is a user requirements to enable users to place the emojis wherever they want

[kumilingus]

Then you need to write a custom highlighter that renders multiple emojis and implements drag & drop.
Or you switch to represent emojis as elements and leverage the cell embedding (embed multiple emojis into parent element).