Подсказка mxgraph не отображается

Я знаю, что это было давно, но я много раз видел этот вопрос, и я просто боролся с ним сам, поэтому я постараюсь ответить на него, даже если я, конечно, слишком поздно.

Ответ Арно был на самом деле правильным ответом, несмотря на то, что он был немного коротким.

Ваш первый фрагмент кода был правильным. Проблема заключается в mxGraph, а не в вашей реализации.

Проблема возникает, когда ваш график содержится в чем-то другом на вашей странице, потому что mxGraph добавляет всплывающую подсказку в тело вместо контейнера графика.

Чтобы избежать этого, вы можете переопределить функцию init() mxTooltipHandler следующим образом:

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», но использовал идентификатор вашего графического контейнера.

Это позволит отображать всплывающую подсказку. Но, скорее всего, он будет не в том месте. Чтобы избежать этого, я также отменил функцию сброса следующим образом:

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

Я не уверен, что это лучший способ добиться этого, но это сработало для меня.

У меня была такая же проблема в моем проекте https://github.com/algenty/grafana-flowcharting

Я переписал функцию getTooltip, потому что по умолчанию она пытается добавить дочерний div в документ вместо родительского div, вам также нужен класс mxtooltip https://github.com/algenty/grafana-flowcharting/blob/f15_general/src/Graph_over.js

БР Арно

Я использовал ответ от @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
                );
            }
        }
    };
};