I have this component form react-tooltip where I pass some props and it creates the tooltip. I want the place of the tooltip to be "top" on default, but when I pass the props to be in a different place, to change it.

class Tooltip extends PureComponent {
  render() {
    const { text, element, type, place, className } = this.props;
    return (
      <div data-tip={text} className="m0 p0">
        {element}
        <ReactTooltip
          type={type}
          place={place}
          effect="solid"
          className={className}
          html
        />
      </div>
    );
  }
}

Tooltip.defaultProps = {
  type: 'info',
  place: 'top',
  className: 'tooltip-top',
};

Tooltip.propTypes = {
  text: PropTypes.string.isRequired,
  element: PropTypes.element.isRequired,
  type: PropTypes.string,
  place: PropTypes.sring,
  className: PropTypes.sring,
};

export default Tooltip;

Then I have this other component where I pass some props to the Tooltip component and I just want this only component to be placed on the bottom.

    <Tooltip
      type="warning"
      place="bottom"
      className="tooltip-bottom"
      text={
        'Ingrese los datos de la información financiera histórica de su compañía en la plantilla'
      }
      element={
        <div className={`center mt3 ${styles.optionButton}`}>
          <NavLink
            className="btn btn-primary"
            to={`${path}/manual-upload`}
          >Continuar</NavLink>
        </div>
      }
    />

The problem is that is rendering in the bottom but also on the top. How can I make this to only appear on the bottom (in this component and the rest of the tooltips on the top). Thanks ;)

I have this component form react-tooltip where I pass some props and it creates the tooltip. I want the place of the tooltip to be "top" on default, but when I pass the props to be in a different place, to change it.

class Tooltip extends PureComponent {
  render() {
    const { text, element, type, place, className } = this.props;
    return (
      <div data-tip={text} className="m0 p0">
        {element}
        <ReactTooltip
          type={type}
          place={place}
          effect="solid"
          className={className}
          html
        />
      </div>
    );
  }
}

Tooltip.defaultProps = {
  type: 'info',
  place: 'top',
  className: 'tooltip-top',
};

Tooltip.propTypes = {
  text: PropTypes.string.isRequired,
  element: PropTypes.element.isRequired,
  type: PropTypes.string,
  place: PropTypes.sring,
  className: PropTypes.sring,
};

export default Tooltip;

Then I have this other component where I pass some props to the Tooltip component and I just want this only component to be placed on the bottom.

    <Tooltip
      type="warning"
      place="bottom"
      className="tooltip-bottom"
      text={
        'Ingrese los datos de la información financiera histórica de su compañía en la plantilla'
      }
      element={
        <div className={`center mt3 ${styles.optionButton}`}>
          <NavLink
            className="btn btn-primary"
            to={`${path}/manual-upload`}
          >Continuar</NavLink>
        </div>
      }
    />

The problem is that is rendering in the bottom but also on the top. How can I make this to only appear on the bottom (in this component and the rest of the tooltips on the top). Thanks ;)

• javascript
• reactjs
• tooltip

• Can you share more code? Specifically what else is inside of the render method where you are creating the Tooltip – Mitch Lillie Commented Apr 15, 2018 at 16:46

2 Answers 2

If you use <ReactTooltip /> inside a loop then you will have to set a data-for and id for each one.

const Tooltip = ({ children, data }) => {
  const [randomID, setRandomID] = useState(String(Math.random()))

  return (
    <>
      <div data-tip={data} data-for={randomID}>{children}</div>
      <ReactTooltip id={randomID} effect='solid' />
    </>
  )
}


export default Tooltip

I ran into this issue today as well, I was able to get it resolved, this might not be relevant to you anymore, but for people looking:

I had this issue with data-for and id as well, the solution for me was to set a more unique identifier/a combination of a word and a variable that I was getting from the parent component (i.e. id=`tooltip-${parent.id}`).

Heres the same issue.