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

问题描述

我目前在ReactJS中从事一个项目.我的某些组件并非始终呈现，而是根据某些条件动态更改.当这些组件连接有工具提示时，我注意到，如果在隐藏元素时工具提示处于活动状态，则工具提示不会消失.我正在寻找一种方法，以便在不呈现元素时删除或至少隐藏此工具提示.

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.

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

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

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

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

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

推荐答案

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

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