javascript - mxgraph 工具提示不显示

Question

我使用 mxgraph-js。我想显示tooltip，所以我编码如下。但是工具提示 不显示。怎么了。

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

我知道已经有一段时间了，但我经常看到这个问题，我自己也在努力解决这个问题，所以我会尝试回答它，即使我肯定来不及了。

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
        );
      }
    }
  };

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