Как показать описание узла при наведении курсора на узел, а также при наведении указателя мыши на линию, соединяющуюся в Arbor js

Question

у нас есть случай, когда у нас слишком много узлов и ребер среди них. Это визуальное представление сложного рабочего процесса, мы хотим показать всплывающее описание пользователя при наведении курсора мыши на узел

Я использую Arbor Javascript для отображения графика узлов и ребер. На графике я хотел бы показать описание узла, как только мышь наведется на этот узел. Вот мой код:

<script src="https://www.technologyscout.net/graphs/common/jquery-2.1.3.js"></script>
<script src="https://www.technologyscout.net/graphs/common/arbor.js"></script>
<script src="https://www.technologyscout.net/graphs/common/arbor-tween.js"></script>

<canvas id="viewport" width="800" height="500"></canvas>
<script type="text/javascript">

(function ($) {
        var Renderer = function (canvas) {
                var canvas = $(canvas).get(0);
                var ctx = canvas.getContext("2d");
                var particleSystem;
                var that = {
                        init: function (system) {
                                particleSystem = system;
                                particleSystem.screenSize(canvas.width, canvas.height);
                                particleSystem.screenPadding(100);
                                that.initMouseHandling()
                        },
                        redraw: function () {
                                ctx.fillStyle = "white";
                                ctx.fillRect(0, 0, canvas.width, canvas.height);
                                particleSystem.eachEdge(function (edge, pt1, pt2) {
                                        ctx.strokeStyle = edge.data.linkcolor;
                                        ctx.lineWidth = 3;
                                        ctx.beginPath();
                                        ctx.moveTo(pt1.x, pt1.y);
                                        ctx.lineTo(pt2.x, pt2.y);
                                        ctx.stroke();
                                });
                                particleSystem.eachNode(function (node, pt) {
                                        ctx.beginPath();
                                        ctx.arc(pt.x, pt.y, 15, 0, 2 * Math.PI);
                                        ctx.fillStyle = node.data.nodecolor;
                                        ctx.fill();
                                        ctx.font = "18px Arial";
                                        ctx.fillStyle = "#000000";
                                        ctx.fillText(node.data.name, pt.x + 20, pt.y + 5);
                                });
                        },
                        initMouseHandling: function () {
                                var dragged = null;
                                var handler = {
                                        clicked: function (e) {
                                                var pos = $(canvas).offset();
                                                _mouseP = arbor.Point(e.pageX - pos.left, e.pageY - pos.top);
                                                dragged = particleSystem.nearest(_mouseP);
                                                if (dragged && dragged.node !== null) {
                                                        dragged.node.fixed = true;
                                                }
                                                $(canvas).bind('mousemove', handler.dragged);
                                                $(window).bind('mouseup', handler.dropped);
                                                return false;
                                        },
                                        dragged: function (e) {
                                                var pos = $(canvas).offset();
                                                var s = arbor.Point(e.pageX - pos.left, e.pageY - pos.top);
                                                if (dragged && dragged.node !== null) {
                                                        var p = particleSystem.fromScreen(s);
                                                        dragged.node.p = p
                                                }
                                                return false;
                                        },
                                        dropped: function (e) {
                                                if (dragged === null || dragged.node === undefined) return;
                                                if (dragged.node !== null) dragged.node.fixed = false;
                                                dragged.node.tempMass = 1000;
                                                dragged = null;
                                                $(canvas).unbind('mousemove', handler.dragged);
                                                $(window).unbind('mouseup', handler.dropped);
                                                _mouseP = null;
                                                return false;
                                        }
                                };
                                $(canvas).mousedown(handler.clicked);
                        }
                }
                return that;
        }
        $(document).ready(function () {
                var sys = arbor.ParticleSystem(900, 900, 0.2);
                sys.renderer = Renderer("#viewport");
                sys.addNode('Node 1', {name: " Main Client", nodecolor: "#88cc88"});
                sys.addNode('Node 2', {name: " Client 2", nodecolor: "#888888"});
                sys.addNode('Node 3', {name: " Client 3", nodecolor: "#888888"});
                sys.addNode('Node 4', {name: " Client 4", nodecolor: "#888888"});
                sys.addNode('Node 5', {name: " Client 5", nodecolor: "#888888"});

                sys.addNode('Node 6', {name: "Client 6", nodecolor: "#888888"});
                       sys.addNode('Node 9', {name: "Client 6", nodecolor: "#888888"});
                         sys.addNode('Node 7', {name: "Node 7", nodecolor: "#888888"});
                sys.addEdge('Node 1', 'Node 3', {linkcolor: "red"});
                sys.addEdge('Node 1', 'Node 2', {linkcolor: "#888888"});
                sys.addEdge('Node 2', 'Node 5', {linkcolor: "#ff8888"});
                sys.addEdge('Node 2', 'Node 4', {linkcolor: "#ff8888"});
                sys.addEdge('Node 4', 'Node 5', {linkcolor: "#ff8888"});
                sys.addEdge('Node 5', 'Node 6', {linkcolor: "#888888"});
                    sys.addEdge('Node 1', 'Node 7', {linkcolor: "#888888"});
                            sys.addEdge('Node 4', 'Node 3', {linkcolor: "green"});
                              sys.addEdge('Node 6', 'Node 7', {linkcolor: "green"});
                                sys.addEdge('Node 2', 'Node 6', {linkcolor: "green"});
                                   sys.addEdge('Node 5', 'Node 9', {linkcolor: "green"});
        })
})(this.jQuery);

</script>