从 DOM 中删除元素时如何删除/隐藏引导工具提示

Question

我目前正在 ReactJS 开展一个项目。 我的一些组件并非一直呈现，而是根据某些条件动态变化。 当这些组件附有工具提示时，我注意到如果在隐藏元素时工具提示处于活动状态，则工具提示不会 go 消失。 我正在寻找一种在未呈现元素时删除或至少隐藏此工具提示的方法。

这就是我使用 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>

注意我无法通过工具提示使用 select 所有元素：

$('[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"选项只是为了防止更复杂的布局这样的定位问题 。）

Answer 3

虽然这是一个较旧的问题，但这可能会对将来的某人有所帮助......我在一个 Vue 应用程序中遇到了这个问题并将工具提示设置为 hover 并没有解决我的问题（我还希望它出现在焦点上，因为可访问性原因）。 最终，将 data-container 设置为父元素对我有用，然后在该元素内创建工具提示（在我的情况下，整个父元素被删除，因此工具提示随后被删除）。 请注意，如果您遇到工具提示放置问题，您可能还需要将数据边界设置为“窗口” - 这将确保它会溢出容器。 例如：

<button data-toggle="tooltip" data-placement="right" data-container=".container" data-boundary="window"></button>

Answer 4

接受的答案似乎都没有解决我的问题，只会让工具提示浮动在页面中间，然后在滚动时，由于绝对定位，它会移动到页面的左上角。 （我正在使用 Vue，并且该元素上已经有一个 @click 事件，所以我添加了一个父包装 div 并在那里应用了一个内联事件）

<div onclick="removeTT()">
     <div data-toggle="tooltip" data-placement="top" title="Tooltip on top"></div>
</div>

<script>
function removeTT() {
    $('.tooltip').tooltip('hide');
}
</script>