Greetings,
In my project I am displaying a vis.js graph, using ReactJS and I would like to have the nodes of the displayed network react to the mouse-hover event by displaying a popup/tooltip. Every node has a title attribute, and thats what the tooltip should display.
This is how they do it in their example:
<!doctype html>
<html>
<head>
<title>Network | Interaction events</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{ id: 1, label: 'Node 1', title: 'I have a popup!' },
{ id: 2, label: 'Node 2', title: 'I have a popup!' },
{ id: 3, label: 'Node 3', title: 'I have a popup!' },
{ id: 4, label: 'Node 4', title: 'I have a popup!' },
{ id: 5, label: 'Node 5', title: 'I have a popup!' }
]);
// create an array with edges
var edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction: { hover: true },
manipulation: {
enabled: true
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
Here the popups work.
I am loading the node related data from a database, and the nodes are drawn according to that data just fine. Everything works properly, except the popup doesn't show when triggered by the hover event. This is the relevant part of the component.tsx file:
import * as React from 'react';
import NodeGraph from 'react-graph-vis';
import { IEdge, ISkill } from '../../../models';
import Options from './skillTree.options';
import Props from './skillTree.props';
import State from './skillTree.state';
export default class extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
graph: { nodes: [], edges: [] },
options: Options,
selectedNode: undefined,
}
}
//...
private _skillTreeRequestCallback(graph: {
nodes: ISkill[],
edges: IEdge[]
}) {
graph.nodes = graph.nodes.map(skill => ({
...skill,
hidden: skill.Hidden,
image: skill.Image,
label: skill.Label,
id: skill.Id,
title: "Hardcoded popup message"
}));
graph.edges = graph.edges.map(edge => ({
...edge,
from: edge.From,
to: edge.To
}));
this.setState({ graph, isLoading: false });
}
//...
public render() {
return (this.state.graph.nodes.length > 0 ? <main style={this.props.style} >
<NodeGraph graph={this.state.graph} options={this.state.options}/>
</main> : <LoadingView style={this.props.style} />);
}
And the data arrives just fine from the database. The title attributes of the nodes are there, which I was able to log into the console after the query ran. That title attribute is what the vis.js canvas should display/draw as a popup when the hover event is triggered.
The relevant options that I load from this.state.options are:
interaction: {
hover: true
},
manipulation: {
enabled: true
},
Yet the popup message doesn't ever show up.
I tried to check whether the popup event actually happens, and seemingly it does, since the showPopup event of vis.js, -which happens when a popup is shown- does get triggered, the console.log I put into it runs, but the popup still doesn't actually show up on the screen.
In theory, in ReactJS I use the NodeGraph to draw the graph with the adequate data and it should do basically the same thing as this line:
var network = new vis.Network(container, data, options);
But apparently something with the popups gets lost in the ReactJS version, unless the reason is that I am doing something wrong.
Does anybody know of any solution that could help me display the title tooltip of a vis.js graph with a hover event in ReactJS? Any help is much appreciated.
Thanks,
Balint
Oddly by default the css is hiding the tooltip.
In your CSS set .vis-network: {overflow:visible;}