snippetjavascriptTip

Tooltips, alerts and modals in React

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

modalstooltipsandreactalerts

Problem

Dialog components like tooltips, alerts and modals are essential for user interaction. They provide feedback, warnings and additional information to users. While a little more involved to implement, they're nothing that React can't handle.
For a simple tooltip component, you'll need to use the useState() hook to manage the state of the tooltip. The tooltip should be displayed when the user hovers over the element and hidden when the user moves the cursor away. For that purpose, you can use the onMouseEnter and onMouseLeave events.
<code-tabs full-width="true">
</code-tabs>
In order to create an alert component, you'll need to manage the state of the alert. This state involves the isShown state to determine if the alert should be displayed and the isLeaving state to handle the closing animation.

Solution

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.createRoot(document.getElementById('root')).render(
  <Tooltip text="Simple tooltip">
    <button>Hover me!</button>
  </Tooltip>
);

<code-tabs full-width="true">
</code-tabs>
In order to create an alert component, you'll need to manage the state of the alert. This state involves the isShown state to determine if the alert should be displayed and the isLeaving state to handle the closing animation.
The alert should be displayed when the component is rendered and hidden after a certain amount of time. You can use the useState() hook to manage the state and the useEffect() hook to handle the timeout with the help of setTimeout().
Additionally, we need to define a closeAlert() function to handle the closing of the alert. This function will set the isLeaving state to true, wait for the specified timeout, and then set the isShown state to false.
<code-tabs full-width="true">

Code Snippets

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.createRoot(document.getElementById('root')).render(
  <Tooltip text="Simple tooltip">
    <button>Hover me!</button>
  </Tooltip>
);

.tooltip-container {
  position: relative;
}

.tooltip-box {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  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 rgba(0, 0, 0, 0.7) transparent;
}

const Alert = ({ isDefaultShown = false, timeout = 250, type, message }) => {
  const [isShown, setIsShown] = React.useState(isDefaultShown);
  const [isLeaving, setIsLeaving] = React.useState(false);

  let timeoutId = null;

  React.useEffect(() => {
    setIsShown(true);
    return () => {
      clearTimeout(timeoutId);
    };
  }, [isDefaultShown, timeout, timeoutId]);

  const closeAlert = () => {
    setIsLeaving(true);
    timeoutId = setTimeout(() => {
      setIsLeaving(false);
      setIsShown(false);
    }, timeout);
  };

  return (
    isShown && (
      <div
        className={`alert ${type} ${isLeaving ? 'leaving' : ''}`}
        role="alert"
      >
        <button className="close" onClick={closeAlert} />
        {message}
      </div>
    )
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <Alert type="info" message="This is info" />
);

Context

From 30-seconds-of-code: tooltip-alert-modal

Revisions (0)

No revisions yet.