Tooltip

pnpm add @base-ui/react motion

"use client";

import { Tooltip } from "@base-ui/react/tooltip";
import { QuestionIcon } from "@phosphor-icons/react";
import { AnimatePresence, motion } from "motion/react";

export default function ExampleTooltip() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger className="d-f ai-c jc-c c-slate-8 bg-transparent bw-0 c-p h:c-indigo fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6">
          <QuestionIcon size={24} />
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Positioner sideOffset={4}>
            <AnimatePresence>
              <Tooltip.Popup
                render={
                  <motion.div
                    initial={{ opacity: 0, y: 4 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 4 }}
                    transition={{ type: "spring", stiffness: 500, damping: 30 }}
                  />
                }
                className="px-3 py-2 br-1 bg-slate-12 fs-sm c-white bsh-sm"
              >
                Password must be 8+ characters
              </Tooltip.Popup>
            </AnimatePresence>
          </Tooltip.Positioner>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}