# V tooltip 7

> Keyboard Shortcut Toolbar

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-tooltip-7).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-tooltip-7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-tooltip-7-light-9ab8397146547ae0.png
- Registry item: https://ui.cnippet.dev/r/v-tooltip-7.json
- Categories: tooltip
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-tooltip-7.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: `@cnippet/tooltip`

## Files

### `registry/default/variants/v-tooltip-7.tsx`

```tsx
import {
  AlignCenterIcon,
  AlignJustifyIcon,
  AlignLeftIcon,
  AlignRightIcon,
  BoldIcon,
  ItalicIcon,
  StrikethroughIcon,
  UnderlineIcon,
} from "lucide-react";
import { Button } from "@/registry/default/ui/button";
import { Kbd } from "@/registry/default/ui/kbd";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/registry/default/ui/tooltip";

const tools = [
  { icon: BoldIcon, label: "Bold", shortcut: ["⌘", "B"] },
  { icon: ItalicIcon, label: "Italic", shortcut: ["⌘", "I"] },
  { icon: UnderlineIcon, label: "Underline", shortcut: ["⌘", "U"] },
  {
    icon: StrikethroughIcon,
    label: "Strikethrough",
    shortcut: ["⌘", "⇧", "X"],
  },
] as const;

const aligns = [
  { icon: AlignLeftIcon, label: "Align left", shortcut: ["⌘", "⇧", "L"] },
  { icon: AlignCenterIcon, label: "Align center", shortcut: ["⌘", "⇧", "E"] },
  { icon: AlignRightIcon, label: "Align right", shortcut: ["⌘", "⇧", "R"] },
  { icon: AlignJustifyIcon, label: "Justify", shortcut: ["⌘", "⇧", "J"] },
] as const;

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <TooltipProvider>
        <div className="flex items-center gap-1 rounded-lg border bg-background p-1 shadow-sm">
          {tools.map(({ icon: Icon, label, shortcut }) => (
            <Tooltip key={label}>
              <TooltipTrigger render={<Button size="icon" variant="ghost" />}>
                <Icon aria-hidden="true" className="size-4" />
                <span className="sr-only">{label}</span>
              </TooltipTrigger>
              <TooltipContent className="px-2.5 py-2">
                <div className="flex items-center gap-3">
                  <span>{label}</span>
                  <span className="flex items-center gap-0.5">
                    {shortcut.map((k) => (
                      <Kbd key={k}>{k}</Kbd>
                    ))}
                  </span>
                </div>
              </TooltipContent>
            </Tooltip>
          ))}
          <div className="mx-1 h-5 w-px bg-border" />
          {aligns.map(({ icon: Icon, label, shortcut }) => (
            <Tooltip key={label}>
              <TooltipTrigger render={<Button size="icon" variant="ghost" />}>
                <Icon aria-hidden="true" className="size-4" />
                <span className="sr-only">{label}</span>
              </TooltipTrigger>
              <TooltipContent className="px-2.5 py-2">
                <div className="flex items-center gap-3">
                  <span>{label}</span>
                  <span className="flex items-center gap-0.5">
                    {shortcut.map((k) => (
                      <Kbd key={k}>{k}</Kbd>
                    ))}
                  </span>
                </div>
              </TooltipContent>
            </Tooltip>
          ))}
        </div>
      </TooltipProvider>
    </div>
  );
}
```