Next.js Discord

Discord Forum

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Answered
neon 🎃 posted this in #help-forum
Open in Discord
Avatar
neon 🎃OP
I do understand why this error occured, it's because of this part:
        <p className="text-xl text-white px-6 py-4 w-[45%]">
          A dedicated{" "}
          <Tooltip tooltip="My cool tooltip!">
            <span className="text-primary">programmer</span>
          </Tooltip>{" "}
          with a penchant for turning ideas into reality through elegant lines
          of code. Embracing challenges and seeking innovative solutions in the
          ever-evolving landscape of technology.
        </p>

In here, there's a Tooltip tag inside a p tag, and the tooltip tag contains divs:
  return (
    <div onMouseEnter={({ clientX }) => ...>
      <span
        ref={tooltipRef}
        className="..."
      >
        {tooltip}
      </span>
      {children}
    </div>
  );

Now, how do I make it work?
Answered by joulev & fuma pray for Schneider
Try changing the div to span
View full answer

5 Replies

Avatar
joulev & fuma pray for Schneider
Try changing the div to span
Answer
Avatar
neon 🎃OP
wow, it works. Thank you so much!
oh
Avatar
joulev & fuma pray for Schneider
Np, glad it helped
Avatar
neon 🎃OP
👍