Let AI write emails and messages for you 🔥

How to build a tooltip in React without using any library

Gourav Goyal

Gourav Goyal

Sep 7, 2023

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(() => {
    }, 300);

  const handleMouseLeave = () => {
    if (hoverTimeout.current) {
      hoverTimeout.current = null;

  return (
      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]">
            <div className="-my-2 text-center text-black"></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">
        className="rounded-lg bg-transparent p-0.5 text-slate-400 hover:text-red-300">
        <CloseCircle className="h-6 w-6" />
That's all, folks!

Gourav Goyal

Gourav Goyal