главная/React JS tooltip компонент
react js tooltip component

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')
);