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 实际上是正确答案，尽管有点短。

您的第一个 sn-p 代码是正确的。问题在于 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
        );
      }
    }
  };

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

Answer 2

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

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

BR 阿诺

Answer 3

我使用了来自@arnud 的答案，并且几乎没有修复 1. 它会显示边缘的工具提示 2.你必须添加.maTooltip { position : absolute }才能显示工具提示

import { Graph } from './types';

declare var mxTooltipHandler, mxEvent, mxUtils;

export const initTooltips = (graph: Graph, graphElementId: string) => {

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

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

            container.appendChild(this.div);

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

    mxTooltipHandler.prototype.reset = function(me, restart, state) {
        const evt = me.getEvent();
        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')
            ) {
                const node = me.getSource();

                const x = evt.offsetX;
                const y = evt.offsetY;

                const 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
                        ) {
                            let tip = this.graph.getTooltip(state, node, x, y);
                            this.show(tip, x, y);
                            this.state = state;
                            this.node = node;
                            this.stateSource = stateSource;
                        }
                    }),
                    this.delay
                );
            }
        }
    };
};

Answer 4

在 Angular 上为 div 添加标题并设置它：

HTML：

<div #container title={{tooltip}} id="mxgraph-diagram-container"></div>

TS：

this.graph.getTooltipForCell = (cell) => {
    this.tooltip = cell.value;
    return cell.value;
}