Create Tooltip Unique in every cell element created

[pandika-csgi]

this.graph.on('change', (cell, value) => {
     
     const labels:any = [];

     if (value.member.length > 0) {
       labels.push({
         attrs: {
           circle: {
            //...
             'data-tooltip-click': 'Here Tooltip',
           },
           icon: {
             //...
             'data-tooltip-click': 'Here Tooltip',
           },
           text: {
             text: ' ',
           },
         },
         position: -30,
       });
     }
     cell.labels(<any[]> labels);
});

This is the next part of my last discussion (#1716)

So, in my app if graph has changed event and value.member has value so I created an element and have tooltip inside that, I want to show all tooltip.
My idea is every change I want to create instance of new ui.Tooltip for every element I created, so in new ui.Tooltip I need some unique id to target the element, maybe like this:

    const tooltips: any = [];
    tooltips.push(new ui.Tooltip({
      // ...
      target: `[data-tooltip-${unique_id}]`,
    }));

and that unique id comes from cell circle attrs I created above.
So I need that unique_id to bind my element with the tooltip and I can do a for each in tooltips array and calling show() and hide().

My question how to get that cell id or unique attribute to bind with my tooltip after I created it because in that circle after created got an id generate by rappid like v-{number}?
or any approach to do like my case?

Thanks

[kumilingus]

How about creating only a single tooltip instance:

new ui.Tooltip({
   /* ... */
   target: `[data-tooltip]`,
});

And if you need to display a tooltip programmatically, you can do:

labels.push({
 attrs: {
   selector1: {
    //...
     'data-tooltip': 'Tooltip 1',
   },
   selector2: {
     //...
     'data-tooltip': 'Tooltip 2',
   }
 }
});

And then find the label node on the linkView and show the tooltip.

const linkView = link.findView(paper);
const labelIndex = 0;
const target = linkView.findLabelNode(labelIndex, 'selector1');
tooltip.show({ target: target });

---

Perhaps I just don't understand what are you trying to achieve.

What do you mean show all tooltips? At the same time?
Did you define 'data-tooltip-click': 'Here Tooltip' twice on purpose?

Note, that you can create a unique selector for any of the cell's node if needed e.g.

const CSSSelector = `.joint-cell[model-id=${cell.id}] [joint-selector="selector1"]`

[pandika-csgi]

Thanks @kumilingus, yeah I define twice because if they hover icon need to show tooltip too,
I'm already found a solution and I think this discussion can be closed.