Remove tooltip from DOM on hide about ember-tooltips HOT 3 OPEN

@maxfierke Our use case is related to rendering the tooltip inside a custom popperContainer. When used in tables where each cell has a tooltip and the table can scroll horizontally inside its container (which is why the container must have overflow: hidden making @popperContainer="body" required, otherwise some of the tooltips would've been cropped), after hovering a sizable number of cells, the horizontal scroll behavior gets slow, because the all tooltips' inline styles (translate) are updated to position each tooltip correctly - unnecessarily, because the tooltip itself is invisible, but it does result in DOM updates nonetheless. So the default behavior is fine for most cases, yet it would be great if there was an option to actually remove the element after the fade out transition is complete.

from ember-tooltips.

@evanb2 this is how the hide behavior works in tooltip.js, the library we use underneath.

In theory, removing the element from the DOM could be done instead, but would incur the cost of removing popper.js/tooltip.js teardown and then removing the DOM node, and then the setup cost again were it to be triggered. If tooltips are triggered by hover (as they often are) this is repeating a whole bunch of work any time someone moves their mouse over a triggering element. In the general case, keeping the DOM node around is better. FWIW, the DOM node is lazily rendered initially by default.

There's no exposed way right now to implement a more aggressive DOM removal, however. You are, however, able to use the isShown property within the component (via the component's block argument) to conditionally render content, but your mileage may vary with regards to how the tooltip reacts to those content changes (might be fine)

from ember-tooltips.

Similar issues here. Because the tooltip stays in the DOM without display:none, having issues where a table resizes after one of the td's shownOn hover tooltips comes in.

from ember-tooltips.