Concern about the tooltip

[perryisbusy]

Hello Mohit,

The project is amazing! Good work! Just wondering if there is any way to implement the tooltip functionality; for example, move the mouse to the "Jon Snow" node, tooltip information such as name, gender will be shown. Move the mouse to an edge, two nodes' information such as weight will be shown? Thank you!

[imohitmayank]

Hey @perryisbusy. Agree, this will be a good feature to have. Will start looking into it 👍

[hollberg]

Seconding everything from @perryisbusy - I'm loving this project, but would also love to be able to leverage the tooltip. Unfortunately it appears to be beyond my ability to build this update myself.
Either way, thanks so much for the great project.

[perryisbusy]

Upon hovering the mouse to any node, the edges associated with that node will be highlighted as "grey". If we want to change the highlight color to "blue" instead of "grey", how to implement that? Thank you!

[imohitmayank]

Hey @perryisbusy , to keep this issue thread clean, I have moved your new question to a separate discussion topic. To answer your question, yes it is possible. You can see the discussion topic for more details. For any further/new queries, request you to create a new issue or discussion topic. Thnx!

[SpaceCadetSkywalker]

Great package, love it. I wish my programming skill were better so I could chip in :) Just a proposition to introduce a column named tooltip in nodes_df this would simplify tooltip generation. For a given node it can contain a dictionary (or YAML string) defining tooltip content. This way only some information about node can be exposed, it can be easily updated, it can aggregate other properties of node, and nodes of different category can have different tooltip formatting. The yaml.dump function can be used to generate tooltip text string (this would allow for flawless handling of any nested lists, dictionaries, etc)

[imohitmayank]

@SpaceCadetSkywalker this is very similar to how I was thinking as well. We can have additional columns in node_df and also edge_df (why not? 😄 ). Then during plotting, the user can define which column to use for the tooltip of nodes and/or edges. So while the initial ideation is done, I am facing problems with displaying the tooltip -- as it requires Javascript and it's not my forte. Will keep this thread updated in case I make any progress. Thnx for the suggestion though, great to get reconfirmed on my thought process. 👍

[dbrosnan08]

Hey all! Found a hacky way to activate tooltips:
(1) add a column to your input node_df called 'title', this column should have the text you want to appear in the tooltip
(2) in jaal.py, add '__name__ ' to the line where the dash app is created (around line 219, under the comment '# create the app', change that line to: app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]))

(3) create a folder named 'assets' in your 'jaal' folder.

(4) add in that folder a css file (file name shouldnt matter, but it must end in .css) with:
.vis-tooltip {
position: absolute;
visibility: hidden;
padding: 5px;
white-space: nowrap;
color: #000000;
background-color: #f5f4ed;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #808074;

box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
pointer-events: none;

z-index: 5;
}

that worked for me anyhow. my understanding of why it worked is that (1) visjs uses 'title' to display tooltips: https://visjs.github.io/vis-network/docs/network/interaction.html (2) for some reason the CSS for getting the tooltip to display is not included and must be added. (3) the way to add CSS to a dash app is documented here: https://dash.plotly.com/external-resources (4) someone had a similar issue with dash on stack exchange, which is where i got the css and the idea from: https://stackoverflow.com/questions/60880982/vis-network-node-tooltip-note-showing

NB!!!!!: these are direct changes to the jaal package, so they may go away if you reinstall jaal or setup your project in a different location; this is just a hack for if you're doing this locally and want it to work

[imohitmayank]

Hey @dbrosnan08 thanks for sharing the workaround, now tooltip functionality is available out-of-box with the latest version of jaal.