How to build a tooltip in React without using any library

Gourav Goyal

Twitter · LinkedIn

Sep 7, 2023

Share

TwitterLinkedInCopy link

When building products, I strive to use as few dependencies as possible to reduce the overall package size and achieve greater flexibility. This is the tooltip we created for use in my product, ChatGPT Writer (https://chatgptwriter.ai). The tooltip is displayed after a 300ms delay when a user hovers over an element. Here's how it looks:

Code for the Tooltip (It uses Tailwind CSS for styling of Tooltip):

import React, { useState, type HTMLProps, type ReactNode, useRef } from "react";
interface TooltipProps {
  children: ReactNode;
  content: string;
}
const Tooltip = (props: React.HTMLProps<HTMLDivElement> & TooltipProps) => {
  const [hover, setHover] = useState(false);
  const hoverTimeout = useRef<NodeJS.Timeout | null>(null); // Use `number` instead of `NodeJS.Timeout` if you're not in a Node environment

  const handleMouseEnter = () => {
    hoverTimeout.current = setTimeout(() => {
      setHover(true);
    }, 300);
  };

  const handleMouseLeave = () => {
    if (hoverTimeout.current) {
      clearTimeout(hoverTimeout.current);
      hoverTimeout.current = null;
    }
    setHover(false);
  };

  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className="relative flex flex-col items-center">
      {hover && (
        <div className="absolute left-0 top-0 mx-auto flex w-full items-center justify-center gap-0 [opacity:0.78] [z-index:999999] [transform:translateY(calc(-100%-10px))]">
          <div className="mx-auto flex flex-col items-center justify-center">
            <div className="whitespace-nowrap rounded-md bg-black p-2 text-[11px] text-white [font-weight:400] [letter-spacing:0] [line-height:13px]">
              {props.content}
            </div>
            <div className="-my-2 text-center text-black">▼</div>
          </div>
        </div>
      )}
      {props.children}
    </div>
  );
};
export default Tooltip;

How to use this Tooltip? Just wrap Tooltip in your component: <Tooltip content="this is text shown on tooltip"> <Component/> </Tooltip>

<Tooltip content="Stop generating response">
      <button
        onClick={cancelResponse}
        className="rounded-lg bg-transparent p-0.5 text-slate-400 hover:text-red-300">
        <CloseCircle className="h-6 w-6" />
      </button>
    </Tooltip>