Question

我曾经使用过mxgraph-js。我想显示工具提示，因此我将其编码如下。但是工具提示 不显示。怎么了

graph.setTooltips(true);
graph.getTooltipForCell = function(cell)
{
    return 'this is a tooltip';
}

我尝试下面的代码，

graph.setTooltips(true);
graph.getTooltip = function(state){
   var cell = state.cell;
   var model = this.getModel(),

   if(model.isEdge(cell)){
      var source = this.getLabel(model.getTerminal(cell,true));
      var target = this.getLabel(model.getTerminal(cell,false));
      return source + "->" + target;
   else return this.getLabel(cell);

但工具提示未显示。

Answer 1

我在项目中遇到了同样的问题 https://github.com/algenty/grafana-flowcharting

我重写了getTooltip函数，因为默认情况下，它尝试将子div添加到文档中，而不是父div，因此您也需要mxtooltip类 https://github.com/algenty/grafana-flowcharting/blob/f15_general/src/Graph_over.js

BR Arnaud

Answer 2

我知道已经有一段时间了，但是我已经看过很多这个问题了，我自己也为此苦苦挣扎，所以即使我来晚了，我也会尝试回答。

Arnaud's answer实际上是正确的答案，尽管有点短。

您的第一段代码是正确的。问题出在mxGraph上，而不是您的实现上。

当图形包含在页面的其他内容中时，就会出现问题，因为mxGraph将工具提示添加到正文中，而不是图形容器中。

为避免这种情况，您可以像这样重写mxTooltipHandler的init（）函数：

mxTooltipHandler.prototype.init = function() {
    if (document.body != null) {
      const container = document.getElementById("graphcontainer");
      this.div = document.createElement("div");
      this.div.className = "mxTooltip";
      this.div.style.visibility = "hidden";

      container.appendChild(this.div);

      mxEvent.addGestureListeners(
        this.div,
        mxUtils.bind(this, function(evt) {
          this.hideTooltip();
        })
      );
    }
  };

在这里我使用了“ graphcontainer”，但是使用了您的图形容器的ID。

这将允许显示工具提示。但这很可能在错误的地方。为了避免这种情况，我也像这样覆盖了重置功能：

mxTooltipHandler.prototype.reset = function(
    me,
    restart,
    state
  ) {
    if (!this.ignoreTouchEvents || mxEvent.isMouseEvent(me.getEvent())) {
      this.resetTimer();
      state = state != null ? state : this.getStateForEvent(me);

      if (
        restart &&
        this.isEnabled() &&
        state != null &&
        (this.div == null || this.div.style.visibility == "hidden")
      ) {
        var node = me.getSource();
        if(!node.attributes.x){
          return
        }
        var x = parseInt(node.attributes.x.nodeValue);
        var y = parseInt(node.attributes.y.nodeValue);

        var stateSource =
          me.isSource(state.shape) || me.isSource(state.text);

        this.thread = window.setTimeout(
          mxUtils.bind(this, function() {
            if (
              !this.graph.isEditing() &&
              !this.graph.popupMenuHandler.isMenuShowing() &&
              !this.graph.isMouseDown
            ) {

              var tip = this.graph.getTooltip(state, node, x, y);
              this.show(tip, x, y);
              this.state = state;
              this.node = node;
              this.stateSource = stateSource;
            }
          }),
          this.delay
        );
      }
    }
  };

我不确定这是否是实现此目标的最佳方法，但这对我有用。

mxgraph工具提示不显示

2 个答案: