使用setTimeout方法延迟渲染ReactDOM元素不起作用。如何延迟渲染元素？

Question

我已经创建了工具提示插件作为React组件。我有一些节点的拓扑图，将鼠标悬停在节点上后想显示此工具提示。而且效果很好，但问题是我不希望立即执行此操作，而是要延迟几秒钟。

我已经制作了渲染DOM元素的方法：

    showWithDelay(nodeContent): any {
    this.isVisible = true;
    ReactDOM.render(<IfsTooltip
        positionLeft={this.leftPosition}
        positionTop={this.topPosition}
        isVisible={this.isVisible}
        children={nodeContent}/>, document.getElementById('ifs-tooltip'));
}

首先，我尝试仅延迟将isVisible道具设置为true，但没有重新渲染组件。因此，我决定延迟渲染此元素，但它也无济于事。

这就是我叫setTimeout的方式：

onNodeOver(system: any, element: any, hoverElement: TopologyElementType) {
    const nodeContent = (<NodeContent system={system} element={element}/>);
    this.leftPosition = element.x + 50;
    this.topPosition = element.y + 50;

    if (hoverElement === TopologyElementType.NODE) {
        setTimeout(this.showWithDelay(nodeContent), 4000);
    }
}

在构造函数中，我有：

    constructor() {
    super();
    this.showWithDelay = this.showWithDelay.bind(this);
}

有人能解决这个问题吗？

编辑：

onNodeOut() {
    this.isVisible = false;
    ReactDOM.unmountComponentAtNode(document.getElementById('ifs-tooltip'));
}

延迟现在可以工作，但是当我在许多节点上移动得非常快时，我可以看到内容被鼠标悬停在每个节点上的数据覆盖。我想实现什么？当我在呈现工具提示之前离开节点时，我想停止计数，也不想呈现此工具提示。