How to use

import {
  Skiper98,
  VtooltipRoot,
  VtooltipItem,
  VtooltipTrigger,
  VtooltipContent,
} from "@/components/v1/skiper98";

const DemoSkiper98 = () => {
  const items = [
    {
      icon: <MessageCircle className="h-full w-full" />,
      label: "Comment",
      labelHasKeyword: ["C"],
      hasBadge: false,
    },
  ];

  return (
    <VtooltipRoot side="left">
      {items.map((item, index) => (
        <VtooltipItem key={index} index={index}>
          <VtooltipTrigger>
            <div className="group relative flex size-8 items-center justify-center rounded-full p-1.5 hover:bg-white/15">
              {item.icon}
            </div>
          </VtooltipTrigger>
          <VtooltipContent>
            <div className="flex items-center justify-center gap-2 px-2 text-sm">
              {item.label}
            </div>
          </VtooltipContent>
        </VtooltipItem>
      ))}
    </VtooltipRoot>
  );
};

Attribution

Inspired by and adapted from Vercel