从 DOM 中删除元素时如何删除/隐藏引导工具提示 [英] How to remove/hide bootstrap tooltip when element is removed from the DOM

问题描述

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

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

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

这就是我在 html(或 jsx)中使用它的方式:

{//点击我删除这个父元素并显示其他内容}}><i className="fa fa-lg fa-pencil-square" title="编辑" data-toggle="tooltip"></i></a>

注意我无法通过工具提示选择所有元素:

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

显然是因为我动态添加元素?至少我目前的研究是这样的

解决方案

我遇到了类似的问题，我知道这个问题已经有点老了，但我发布了我的解决方案，也许它可以帮助将来的某个人...(这是一个 Angular-TypeScript-JQuery 的混合体，但原理是一样的.)

在组件中:

/* 切换 HTML 元素的 Bootstrap 4 工具提示.*/私人工具提示(元素:HTMLElement，动作:字符串):无效{(<any>$(elem)).tooltip("dispose");(<any>$(elem)).tooltip({ container: "body" });(<any>$(elem)).tooltip(action);(<any>$(elem)).tooltip("update");}

在视图中:

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

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

({ container: "body" } 和 "update" 选项只是为了防止 定位问题像这样 用于更复杂的布局.)

I'm currently working on a project in ReactJS. Some of my components are not rendered all the time but change dynamically based on certain conditions. When these components have a tool tip attached to them, I'm noticing that if the tooltip was active when the element was hidden, the tooltip does not go away. I'm looking for a way to remove or at least hide this tooltip when the element is not being rendered.

This is how I'm activating the tooltips using jQuery:

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

This is how I'm using it within the html (or 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>

Note I have not been able to select all elements by tooltip using:

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

Apparently that is because I am adding elements dynamically? At least that is what my research so far shows

解决方案

I was having a similar problem and I know that the question is already a bit old but I post my solution, maybe it helps someone in the future... (It's an Angular-TypeScript-JQuery mixture but the principle is the same.)

In the component:

/* 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");
}

In the view:

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

So basically instead of using a global $('[data-toggle=tooltip]').tooltip() for activating all tooltips at once – which wouldn't work anyway if you have tooltips not being part of the DOM at the time this code is called because the page is generated dynamically by some JS framework for example – you only attach the tooltips to the elements when the cursor enters them, and destroy them immediately when it leaves.

(The { container: "body" } and "update" options are only to prevent positioning issues like this for more complex layouts.)

这篇关于从 DOM 中删除元素时如何删除/隐藏引导工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！