# P tooltip 4

> Vertical group with animated tooltip

A shadcn/ui block from the [@coss](https://coss.com/ui) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/coss/p-tooltip-4).

- Page, with a live preview: https://shadcn.exchange/r/coss/p-tooltip-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/coss/p-tooltip-4-light-1d21d81ceab2f053.png
- Registry item: https://coss.com/ui/r/p-tooltip-4.json
- Categories: tooltip
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://coss.com/ui/r/p-tooltip-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@coss/button`, `@coss/group`, `@coss/tooltip`

## Files

### `registry/default/particles/p-tooltip-4.tsx`

```tsx
"use client";

import { LinkIcon, MailIcon, Share2Icon } from "lucide-react";
import type { ComponentType } from "react";
import { Button } from "@/registry/default/ui/button";
import { Group, GroupSeparator } from "@/registry/default/ui/group";
import {
  Tooltip,
  TooltipCreateHandle,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/registry/default/ui/tooltip";

const tooltipHandle = TooltipCreateHandle<ComponentType>();

const ShareLinkContent = () => {
  return <span>Copy shareable link</span>;
};

const ShareEmailContent = () => {
  return <span>Share via email</span>;
};

const ShareSocialContent = () => {
  return <span>Share to social media</span>;
};

export default function Particle() {
  return (
    <TooltipProvider>
      <Group aria-label="Share options" orientation="vertical">
        <TooltipTrigger
          handle={tooltipHandle}
          payload={ShareLinkContent}
          render={
            <Button aria-label="Copy link" size="icon" variant="outline" />
          }
        >
          <LinkIcon aria-hidden="true" />
        </TooltipTrigger>
        <GroupSeparator orientation="horizontal" />
        <TooltipTrigger
          handle={tooltipHandle}
          payload={ShareEmailContent}
          render={
            <Button
              aria-label="Share via email"
              size="icon"
              variant="outline"
            />
          }
        >
          <MailIcon aria-hidden="true" />
        </TooltipTrigger>
        <GroupSeparator orientation="horizontal" />
        <TooltipTrigger
          handle={tooltipHandle}
          payload={ShareSocialContent}
          render={
            <Button
              aria-label="Share to social"
              size="icon"
              variant="outline"
            />
          }
        >
          <Share2Icon aria-hidden="true" />
        </TooltipTrigger>
      </Group>
      <Tooltip handle={tooltipHandle}>
        {({ payload: Payload }) => (
          <TooltipPopup className="max-w-40" side="right">
            {Payload !== undefined && <Payload />}
          </TooltipPopup>
        )}
      </Tooltip>
    </TooltipProvider>
  );
}
```