Tooltip appeared and disappeared when page loaded for the first time [Vue]

I’m trying to change the default behavior of hovering to clicking to show the tooltip. So I called the setContent function of tooltip plugin to display it, but it appeared and then disappeared when clicking the task the first time the page loaded. After that first click, everything would work as expected.

Following is my snippet:

const node = gantt.ext.tooltips.tooltip.getNode().children[0]
console.log('node:', node)

I logged the node and found that only the parent div was created for the first time clicking, no children of details.

What could be the possible cause of this?

The tooltip was designed to be displayed when you hover the mouse over something, not when you click on it.
For the click event, you can use the QuickInfo:

Here are examples:

If you want to show the tooltip after clicking, you need to implement a custom solution.
If you click on a task row in the grid or timeline, usually, Gantt selects the task after that. And it means that the task row will be repainted. Because of that, the tooltip may be hidden. To fix that, you need to show the tooltip after a timeout.
Here is an example of how it can be implemented:

Thanks ramil. This does help.

But I have a question for QuickInfo that if I can control when it can be displayed?

Now it seems to be the default behavior while clicking a task. Seems I can’t control it inside onTaskClick. Is it possible for me to implement this by other means?

Please, don’t ask the same questions in different places. Let’s continue our discussion here:

Thanks ramil. I just realized I can continue in this thread after I started that one. Thanks for the help.