Fire JointJS Tooltip from another button

[pandika-csgi]

Hello, I would ask about, how to make tooltip show and hide from custom event like state in our app, if the state is off, hide tooltip, otherwise, if state is on show the tooltip

I'm also try used jquery trigger('mouseover') and dispatchevent('mouseover') still not working, is there any other way to do it?

Thanks

[kumilingus]

This worked for me.

$el.trigger('mouseenter');

[pandika-csgi]

There is an API to toggle the tooltip visibility. It is not public / documented but you can use it. I think it makes sense to make the methods public in the next JointJS+ release.

const tooltip = new ui.Tooltip({ /* ... */ });
const target = document.querySelector('.my-element-with-tooltip');
tooltip.show({ target });
tooltip.hide({ target })

Its work for the show method and when { target } I got an error said Argument of type '{ target: Element; }' is not assignable to parameter of type 'Event'. Type '{ target: Element; }' is missing the following properties from type 'TriggeredEvent<any, any, any, any>': currentTarget, delegateTarget, data, bubbles, and 37 more. I use Angular and rappid v3.4.x, and for hide method not working here.
In my case is need to show all tooltip.

Sorry, I'm new in this library,
Thanks

[pandika-csgi]

Updated if Im only use show() and hide() is working, is that tooltip API is only show first element? or can do all element target when initialize in new ui.Tooltip({ target: [data-tooltip-target] /* ... */ });

Thanks

[kumilingus]

You will have to @ts-ignore it for now (the show/hide method expects an event) or create an event programatically.

const target = document.querySelector('.my-element-with-tooltip');
const evt = $.Event('myevent', { target });
tooltip.show(evt);
tooltip.hide(evt);

[pandika-csgi]

okay but, the hide method Expected 0 arguments, but got 1
I'll make that API method as answer even little bit odd in my code and I'll ask about retrieving cell id after on change on graph in new discuss
Thanks @kumilingus

[kumilingus]

You are right about hide() method.

const target = document.querySelector('.my-element-with-tooltip');
const evt = $.Event('myevent', { target });
tooltip.show(evt);
tooltip.hide();

Anyway, we'll fix the typescript definition and add these 2 methods to the documentation ready for the next release.