[BUG] Tooltip content not un-mounting from HTML

[krissalvador27]

Correct me if I'm wrong getComputedStyles(popover).opacity will always return the default value of "1" since it's not set in the code to ever be anything else :/

The issue arises here https://github.com/tvkhoa/react-tippy/blob/master/dist/react-tippy.js#L2366 where it short circuit returns preventing the unmounting of my tooltip content from the body. When I switch to another view the tooltips, although visibly hidden, add to the height of the DOM.

[Vinchens00-zz]

There is a work-around for this issue. You can just keep state of the tooltip (is it hidden or not) in the component state and manually set display: none for the tooltip content.

Like that:

import React from 'react';
import { Tooltip as ExternalTooltip } from 'react-tippy';

class Tooltip extends React.PureComponent {
  state = {
    hide: true
  };

  onChangeHide = value => () => {
    this.setState({ hide: value });
  };

  render() {
    const {
      renderTooltip,
      renderTitle,
      ...props
    } = this.props;

    return (
      <ExternalTooltip
        {...props}
        unmountHTMLWhenHide={true}
        html={
          <div className={`tooltip__content ${this.state.hide ? 'tooltip__content--hidden' : ''}`}>
            {renderTitle()}
          </div>
        }
        onShow={this.onChangeHide(false)}
        onHide={this.onChangeHide(true)}
      >
        {renderTooltip()}
      </ExternalTooltip>
    );
  }
}

export default Tooltip;

[jhodges10]

I'm also running into this issue where it doesn't unmount the way it's supposed to.

This would be a great one to get fixed @tvkhoa!

[jhodges10]

I'm switching to the official react version of Tippy, I need to launch my client's website and this bug is a showstopper.

[smerante]

I'm also running into this issue, @Vinchens00-zz 's work around wasn't working for my use case.

I have a potential css work around, @jhodges10:

.tippy-popper[style*='visibility: hidden'] {
    // Remove any unwanted styles here
}

It looks like some attributes (aria-hidden, visibility) are assigned before the component is fully done transitioning.

The caveat is that if you set display: none the animations won’t have a chance to finish and the popup will immediately close. 
 You can remove height/padding/margin or scale down the tip which will still allow the animations to finish.

Not sure if there's an issue with this workaround, but it seems to be working

[DanielEidlin]

I'm running into the same issue, is there a fix on the work for this? I tried passing unmountHTMLWhenHide to the Tootip component and it still didn't help.

[smerante]

I'm running into the same issue, is there a fix on the work for this?

I doubt it's been fixed unfortunately , but the css workaround I posted above solved the bug I was running into

[DanielEidlin]

For anyone looking for an alternative, I ended up using tippyjs-react. Haven't experienced any issues yet :)

[leephan2k1]

2022 and react 17 still have this problem, unmountHTMLWhenHide not working.