Multi Tooltip

A powerful tooltip component that displays multiple tooltips around a single trigger element. Perfect for complex UI elements that need multiple contextual hints or actions.

Install Dependencies

npx quickcode-ui add MultiTooltip

pnpm dlx quickcode-ui add MultiTooltip

yarn dlx quickcode-ui add MultiTooltip

bunx quickcode-ui add MultiTooltip

Usage

Multi Tooltip Examples


import { MultiTooltip } from "@/components/ui/MultiTooltip";
import { Heart, Coffee, Pizza, Code } from "lucide-react";
import { Button } from "@/components/ui/Button";

export const MultiTooltipExample = () => {
  return (
    <div className="flex flex-col items-center justify-center gap-16 p-8">
    
       <MultiTooltip
          tooltips={[
            { content: "Emma - Loves hiking", position: "top-right" },
            { content: "Maya - Artist & designer", position: "right" },
            { content: "Alex - Bookworm", position: "bottom-right" },
            { content: "Zoe - Yoga instructor", position: "bottom-left" },
            { content: "Riley - Chef", position: "left" },
            { content: "Quinn - Musician", position: "top-left" },
          ]}
        >
        <Button className="flex items-center gap-2 bg-pink-500 hover:bg-pink-600 text-white">
          <Heart className="w-4 h-4" />
          Find Your Match
        </Button>
      </MultiTooltip>

      <MultiTooltip
        tooltips={[
          { content: "Pizza Palace - 15 min", position: "top" },
          { content: "Burger King - 8 min", position: "right" },
          { content: "Sushi Express - 25 min", position: "bottom" }
        ]}
      >
        <Button variant="outline" className="flex items-center gap-2">
          <Pizza className="w-4 h-4" />
          Order Food
        </Button>
      </MultiTooltip>

      <MultiTooltip
       tooltips={[
            { content: "VS Code - Primary editor", position: "top-left" },
            { content: "GitHub - Version control", position: "right" },
            { content: "Figma - Design tool", position: "left" },
            { content: "Notion - Documentation", position: "bottom-right" },
          ]}
      >
        <div className="p-4 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-blue-400 transition-colors">
          <Code className="w-8 h-8 text-blue-500" />
        </div>
      </MultiTooltip>

      {/* Entertainment Hub */}
      <MultiTooltip
        tooltips={[
          { content: "Spotify - Chill vibes", position: "top" },
          { content: "Netflix - Latest series", position: "right" },
          { content: "Steam - Gaming time", position: "left" }
        ]}
      >
        <div className="w-16 h-16 bg-gradient-to-br from-purple-400 to-pink-400 rounded-full flex items-center justify-center cursor-pointer hover:scale-105 transition-transform">
          <Music className="w-6 h-6 text-white" />
        </div>
      </MultiTooltip>
    </div>
  );
};

Props

Prop	Type	Default	Description
`tooltips`	`Array<{content: string, position: Position}>`	-	Array of tooltip objects with content and position
`gap`	`number`	`8`	Distance in pixels between trigger and tooltips
`hideDelay`	`number`	`100`	Delay in milliseconds before hiding tooltips after mouse leave
`className`	`string`	-	Additional CSS classes for the trigger container
`tooltipClassName`	`string`	-	Additional CSS classes applied to all tooltip elements

Position Options

The position property accepts these 8 directional values:

"top" - Center above the trigger
"top-right" - Top-right corner
"right" - Center to the right
"bottom-right" - Bottom-right corner
"bottom" - Center below the trigger
"bottom-left" - Bottom-left corner
"left" - Center to the left
"top-left" - Top-left corner

Features

Multiple Tooltips: Display 2-3 tooltips simultaneously around one trigger
8 Directional Positioning: Comprehensive positioning options for optimal tooltip placement
Smart Collision Detection: Automatically adjusts position to keep tooltips visible within viewport
Staggered Animations: Each tooltip appears with a subtle delay for polished visual effect
Hover Persistence: Tooltips remain visible when hovering over them for interaction
Portal Rendering: Tooltips render in document body to avoid z-index issues
Responsive Positioning: Dynamically updates position on scroll and resize events
Keyboard Accessible: Supports focus and blur events for keyboard navigation
Content-Aware Sizing: Automatically adjusts padding and text size based on content length
Dark Mode Ready: Full support for light and dark themes using CSS tokens