mxGraph浅入之 Tooltip

mxGraph中对图元可以设置在鼠标移入时，显示自定义的提示文字

相关的源码文件：

./src/js/view/mxGraph.js ---> getTooltipForCell

./src/js/handler/mxToolTipHandler.js ,该文件中定义了一个封装了和提示信息设置相关的mxtTooltipHandler(graph, delay)类（第二个参数delay为鼠标移入显示提示信息的延迟时间，默认为500ms）

// 设置图形鼠标移入启动提示
// graph.tooltipHandler.setEnabled(true)
graph.setTooltips(true)
// 自定义提示
graph.getTooltipForCell = function(cell) {return "Hello tooltip"
}

graph.setToolTips(enabled)和graph.tooltipHandler.setEnabled(enabled)两者其实效果是一样的，因为实质上前者是调用了后者，源码如下：

mxGraph.prototype.setTooltips = function (enabled)
{this.tooltipHandler.setEnabled(enabled);
};

实现提示功能的本质是要将mxGraph实例的tooltipHandler属性的enbaled值设置为true，并且添加getTooltipForCell方法的实现，方法的返回值是自定义的要提示的内容，一般为字符串或DOM node。

提示框的默认样式为淡黄色填充，带阴影，黑色字，若是要自定义样式可以修改如下css文件

./src/css/common.css 和 explorer.css（实现兼容IE旧版本）文件中class属性名为mxTooltip的样式

demo

// toolTip.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Cell 的提示功能</title><script>mxBasePath = '../src';</script><script src="../src/js/mxClient.js"></script><script>function main(container){// 判断浏览器是否支持if (!mxClient.isBrowserSupported()){// mxUtils报错提示mxUtils.error('Browser is not supported!', 200, false);}else{// 在已有容器内构造一个graphvar graph = new mxGraph(container);// 设置图形可以被拖动graph.setEnabled(true);  // 容器大小自适应 graph.setResizeContainer(true); // 允许改变元素大小 graph.setCellsResizable(true); // 设置图形鼠标移入启动提示// graph.tooltipHandler.setEnabled(true)graph.setTooltips(true)//预览时鼠标悬浮到节点时，改变鼠标样式graph.getCursorForCell = function (cell) {if (cell != null && cell.value != null && cell.vertex == 1) {return 'pointer';}};// 不自定义getTooltipForCell方法，则tooltip默认为cell的value值graph.getTooltipForCell = function(cell) {return "Hello tooltip"}// 在图形中创建默认组件 var parent = graph.getDefaultParent();// 开始往module里添加cellgraph.getModel().beginUpdate();try{var v1 = graph.insertVertex(parent, null, 'Tooltip1', 20, 20, 80, 30);console.log(v1)var v2 = graph.insertVertex(parent, null, 'Tooltip2', 200, 200, 80, 30);}finally{// 更新事务结束graph.getModel().endUpdate();}}};</script></head>
<body onload="main(document.getElementById('graphContainer'))"><div id="graphContainer"style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;"></div>
</body>
</html>

效果：