14601

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

Question:

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

Answer1:

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

Answer2:

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 <a href="https://stackoverflow.com/questions/41602487/bootstrap-tooltip-in-wrong-position-on-initial-hover-then-in-correct-position" rel="nofollow">positioning issues like this</a> for more complex layouts.)

Recommend

  • Winrt - Adjusting flyout according to where it appears
  • Bootstrap tooltip stops working after any other event runs
  • Flyout changes Page's theme
  • Add foreach value to Ajax
  • Angular transclude in a directive containing a ng-template (generic Confirm Modal)
  • Ransack search string arrays stored in db
  • Eventbus onMessageEvent not getting called
  • Jquery Show & ScrollTop (or ScrollTo)
  • CSS: How to fix overlapping divs
  • how to remove a div with same ids but display='block' and display='none' in JAVa
  • Change navbar in bootstrap if user login
  • Yii2: Using Kartik Depdrop Widget?
  • getelement by class name for clicking
  • Android Chronometer starts and stops but carries on counting when stopped
  • Send data from edittext to listview
  • Creating a Multi-Step Modal Using Jquery
  • Is looping through all style sheets and classes a good idea in JavaScript?
  • Jquery Mobile pageLoading() Method how does it work?
  • Validate child input components on submit with Vee-Validate and vue js 2
  • Simulate click Geckofx vb,net
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • javaw.exe and eclipse startup problems
  • jquery mobile loadPage not working
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Data Validation Drop Down Box Arrow Disappearing
  • How do you join a server to an Active Directory (domain)?
  • embed rChart in Markdown
  • Android Google Maps API OnLocationChanged only called once
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • failed to connect to specific WiFi in android programmatically
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal