Question

我目前正在研究ReactJS中的一个项目。我的某些组件不会一直呈现，而是根据特定条件动态更改。当这些组件附有工具提示时，我注意到如果隐藏元素时工具提示处于活动状态，则工具提示不会消失。我正在寻找一种方法来删除或至少隐藏元素未被渲染时的工具提示。

这就是我使用jQuery激活工具提示的方法：

$(document).ready(function() {
      $("body").tooltip({ selector: '[data-toggle=tooltip]', placement: 'bottom' })
    })

这就是我在html（或jsx）中使用它的方式：

<a className="icon-btn" onClick={ () => {
//on Click I remove this parent element and show something else
}}>
<i className="fa fa-lg fa-pencil-square" title="Edit" data-toggle="tooltip"></i>
</a>

注意我无法使用工具提示选择所有元素：

$('[data-toggle=tooltip]').tooltip()

显然那是因为我动态添加元素？至少这是我迄今为止的研究显示

Answer 1

$('.tooltip').tooltip('hide');

Answer 2

我遇到了类似的问题而且我知道这个问题已经有点陈旧但是我发布了我的解决方案，也许它可以帮助将来的某个人......（这是一个Angular-TypeScript-JQuery混合物，但其原理是相同。）

在组件中：

/* Toggles the Bootstrap 4 tooltip of an HTML element. */
private tooltip(elem: HTMLElement, action: string): void {
    (<any>$(elem)).tooltip("dispose");
    (<any>$(elem)).tooltip({ container: "body" });
    (<any>$(elem)).tooltip(action);
    (<any>$(elem)).tooltip("update");
}

在视图中：

<someElement data-toggle="tooltip" title="..."
  (mouseenter)="tooltip($event.target,'show')"
  (mouseleave)="tooltip($event.target,'hide')">
</someElement>

所以基本上不是使用全局$('[data-toggle=tooltip]').tooltip()来同时激活所有工具提示 - 如果在调用此代码时工具提示不是DOM的一部分，则无法工作，因为生成了页面例如，由某些JS框架动态生成 - 您只在光标进入时将工具提示附加到元素，并在它离开时立即销毁它们。

（{ container: "body" }和"update"选项仅用于阻止positioning issues like this更复杂的布局。）

如何从DOM

2 个答案: