tooltip in react.js code example

Example: tolltip in react js

import React, { useState, useEffect } from 'react';
import { Button, UncontrolledTooltip } from 'reactstrap';

const shortText = 'Hi';
const longText = 'Long tooltip content to test update';

const TooltipContent = ({ update }) => {
  const [text, setText] = useState(shortText);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setText(text === shortText ? longText : shortText);
      update();
    }, 1000);

    return () => clearInterval(intervalId);
  });

  return (
    <>{text}</>
  );
}

const Example = () => {
  return (
    <div className="text-center">
      <Button id="updateTooltip">Click me</Button>
      <UncontrolledTooltip placement="top" target="updateTooltip" trigger="click">
        {({ update }) => (
          <TooltipContent update={update} />
        )}
      </UncontrolledTooltip>
    </div>
  );
}

export default Example;