React JS tooltip компонент

Простой тултип компонент на react js. Напишем функциональный tooltip, который будет всплывать по событию onMouseEnter при наведении на кнопку и исчезать по событию onMouseLeave. При этом будем использовать всего лишь 1 хук useState.

CSS стили для компонента

.tooltip-container {
  position: relative;
}

.button-tool-tip {
  border: none;
  background: #fec901;
  font-weight: bold;
  color: black;
  font-size: 18px;
  padding: 10px;
  cursor: pointer;
}

.tooltip-box {
  position: absolute;
  background: black;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  top: calc(100% + 5px);
  display: none;
}

.tooltip-box.visible {
  display: block;
}

.tooltip-arrow {
  position: absolute;
  top: -10px;
  left: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

Tooltip компонент

const Tooltip = ({ children, text, ...rest }) => {
  const [show, setShow] = React.useState(false);

  return (
    <div className="tooltip-container">
      <div className={show ? 'tooltip-box visible' : 'tooltip-box'}>
        {text}
        <span className="tooltip-arrow" />
      </div>
      <div
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
        {...rest}
      >
        {children}
      </div>
    </div>
  );
};

ReactDOM.render(
  <Tooltip text="React JS Tooltip component">
    <button className="button-tool-tip">Наведись на меня</button>
  </Tooltip>,
  document.getElementById('root')
);