diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js index f457a15..32c5ecc 100644 --- a/src/module/cytoscapeMap.js +++ b/src/module/cytoscapeMap.js @@ -1,7 +1,7 @@ import cytoscape from 'cytoscape'; import dagre from 'cytoscape-dagre'; -// import tippy from 'tippy.js'; -// import 'tippy.js/dist/tippy.css'; +import tippy from 'tippy.js'; +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(); + }) }