Discover: Map add tip

src/module/cytoscapeMap.js

@@ -1,7 +1,7 @@
 import cytoscape from 'cytoscape';
 import dagre from 'cytoscape-dagre';
-// import tippy from 'tippy.js';
+import tippy from 'tippy.js';
-// import 'tippy.js/dist/tippy.css';
+import 'tippy.js/dist/tippy.css';
 import Gradient from 'javascript-color-gradient'; // 多個色階產生器
 import TimeLabel from '@/module/timeLabel.js'; // 時間格式轉換器
 
@@ -202,4 +202,22 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     ],
   });
 
+  // creat tippy.js
+  let tip;
+  cy.on('mouseover', 'node', function(event) {
+      var node = event.target
+      let ref = node.popperRef()
+      let dummyDomEle = document.createElement('div');
+      let content = document.createElement('div');
+      content.innerHTML = node.data("label")
+      tip = new tippy(dummyDomEle, { // tippy props:
+          getReferenceClientRect: ref.getBoundingClientRect,
+          trigger: 'manual',
+          content:content
+       });
+      if(node.data("label").length > 10) tip.show();
+  })
+  cy.on('mouseout', 'node', function(event) {
+      tip.hide();
+  })
 }