从 DOM 中删除元素时如何 remove/hide bootstrap 工具提示

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>

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

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

显然是因为我在动态添加元素？至少这是我目前的研究表明的

Answer 1

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

Answer 2

我遇到了类似的问题，我知道这个问题已经有点老了，但我 post 我的解决方案，也许它对将来的人有帮助......（这是一个 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 应用程序中遇到了这个问题，将工具提示设置为仅悬停并没有解决我的问题（我也希望它出现出于可访问性原因的重点）。最终，将 data-container 设置为对我有用的父元素，然后在该元素内创建工具提示（在我的例子中，整个父元素被删除，因此工具提示随之被删除）。请注意，如果您运行进入工具提示放置问题，您可能还需要将 data-boundary 设置为“window” - 这将确保它会溢出容器。例如：

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

从 DOM 中删除元素时如何 remove/hide bootstrap 工具提示

How to remove/hide bootstrap tooltip when element is removed from the DOM

javascript

jquery

twitter-bootstrap

bootstrap-4