Add tooltip_trigger similar to tooltip_source but to control if manual or on hover

[shadiakiki1986]

Problem

Currently, widget.ts#L278 has trigger: "manual"

Proposed Solution

Change it to trigger: node.data()["tooltip_trigger"] ? node.data()["tooltip_trigger"] : "manual" so as to allow the user to control it by setting a node data entry "tooltip_trigger": "mouseenter focus" for example.

[shadiakiki1986]

I realized an hour later that L278 above is wrapped in the .on("click". I replaced it with .on("mouseover", "node" for the sake of capturing only on hover on the node, but it didn't work for me. I guess that part of the code needs some review, eg:

• is it creating new tooltips for each time a user clicks on a node? Why not just create all the tooltips on initialization
• why is this creating a tooltip on a dummy div and then using .show instead of just attaching the tooltip on the node directly? I'm not familiar with the internals of cytoscape.js and tippy.js to know if this actually works

[ianhi]

That would be a great PR if you'd like to work on it. I'll happily release any such improvements.

is it creating new tooltips for each time a user clicks on a node? Why not just create all the tooltips on initialization

I can think of two reasons:

1. Performance - time to first display is nice to keep fast so lazily creating these is good - especially if you have a graph with many nodes
2. The data in the tooltip is dynamic so we hold off creating it becuase the user can modify it at any time.

[ianhi]

why is this creating a tooltip on a dummy div and then using .show instead of just attaching the tooltip on the node directly? I'm not familiar with the internals of cytoscape.js and tippy.js to know if this actually works

Maybe @marimeireles would know better but I suspect that this is following an example from those libraries.