如何在从DOM中移除元素时删除/隐藏Bootstrap工具提示

Question

我目前正在使用ReactJS开发项目。我的一些组件不是始终渲染的，而是根据特定条件动态更改。当这些组件有工具提示时，如果在元素隐藏时提示工具提示仍处于活动状态，我会注意到提示工具提示不会消失。我正在寻找一种方法，在元素未被渲染时删除或至少隐藏此提示工具提示。

这是我使用jQuery激活工具提示的方式:

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

这是我在HTML（或JSX）中使用它的方式：

这是我在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()

显然那是因为我正在动态添加元素？至少这是我目前的研究所显示的。

- B-Stewart

Answer 1

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

- kjdion84

---

如果你想要移除工具提示而不需要淡出效果，那么“dispose”方法不会像“hide”方法一样消失。 - Andrew Schultz

这不起作用，因为元素从dom中删除后，$('.tooltip')返回为空。 - Jason Cheng

@JasonCheng，我的解决方案是在元素从DOM中移除之前先删除工具提示。可能不适用于所有情况，但肯定适用于其他情况。 - Ben

这对我来说仍然有一些问题，因为隐藏方法会淡出，而这需要一点时间，所以在元素被移除/隐藏之前它仍然存在，并导致它在消失之前在屏幕的左上角跳动了一小会儿。我可以使用dispose方法，但我只是想隐藏和显示我的按钮，而不是完全从DOM中删除它，这意味着每次显示它时我都必须重新创建工具提示。 - Raj

所以我也将 data-container 设置为按钮本身，这在我的情况下起作用。 - Raj

Answer 2

虽然这是一个较旧的问题，但可能有助于未来的某个人……我在 Vue 应用程序中遇到了这个问题，仅将工具提示设置为悬停并不能解决我的问题（出于可访问性原因，我也希望它在焦点上出现）。最终，将 data-container 设置为父元素对我有用，这样就在此元素内创建了工具提示（在我的情况下，整个父元素被移除，因此工具提示也会随之被移除）。请注意，如果您遇到工具提示放置问题，您可能还需要将 data-boundary 设置为“window”-这将确保它将溢出容器。例如：

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

- Jaimerine

Answer 3

我遇到了类似的问题，虽然这个问题有点老了，但是我还是想分享我的解决方案，或许对未来的某个人有所帮助…… （我的解决方案使用了 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"选项仅用于防止像这样的定位问题出现在更复杂的布局中。）

- tom

---

将此标记为答案，尽管问题和答案的真正答案是不要将jQuery与其他前端框架流混合使用，因为在处理dom时会出现类似的冲突问题。 - B-Stewart

这个问题与混合框架无关。这里有一个样例，它有相同的问题，但除了Bootstrap之外没有使用其他框架。http://jsfiddle.net/zephyrprime/9oap4scL/9/ - Jason Cheng

如果光标从未离开元素并且在光标仍停留在元素上时删除该元素，则此方法无效。这正是我正在处理的确切情况。单击按钮，然后删除相同的按钮，但工具提示仍然存在。 - Jason Cheng

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>

- Andrew West