# Icons With Tooltips

> A row of icons that reveal a short tooltip on hover. Packs many features into a small space while keeping extra detail one cursor away.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/marketing-icon-sections-icons-with-tooltips).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/marketing-icon-sections-icons-with-tooltips
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/marketing-icon-sections-icons-with-tooltips-light-939bf15ec96c219c.png
- Registry item: https://www.shadcn-ui-blocks.com/r/marketing-icon-sections-icons-with-tooltips.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/marketing-icon-sections-icons-with-tooltips.json
```

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

## Dependencies

- npm packages: `class-variance-authority`, `lucide-react`, `radix-ui`

## Files

### `components/blocks/marketing/icon-sections/icons-with-tooltips.tsx`

```tsx
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
import { useEffect, useState } from 'react';

import {
  Activity,
  AlertTriangle,
  ArrowRight,
  BellRing,
  BookOpen,
  Building2,
  CheckCircle2,
  CloudCog,
  Code2,
  Cog,
  Computer,
  Database,
  Fingerprint,
  Gauge,
  Highlighter,
  Image,
  Layers,
  LineChart,
  Lock,
  Microscope,
  Network,
  Palette,
  RefreshCcw,
  Rocket,
  Search,
  Shield,
  Smartphone,
  Stars,
  Tablet,
  Upload,
  Users,
  Wand2,
  Zap,
} from 'lucide-react';

interface IconFeature {
  id: string;
  name: string;
  icon: React.ReactNode;
  description: string;
  highlight?: string;
  info?: string[];
  color: string;
}

export default function IconsWithTooltips() {
  const setMounted = useState(false)[1];

  // Ensure tooltips work only on client side
  useEffect(() => {
    setMounted(true);
  }, []);

  const iconFeatures: IconFeature[] = [
    {
      id: 'security',
      name: 'Enterprise Security',
      icon: <Shield className="h-6 w-6" />,
      description: 'Military-grade protection for your most sensitive data',
      highlight: 'SOC 2 Type II and GDPR compliant',
      info: [
        'End-to-end encryption for all data',
        'Advanced threat detection',
        'Regular security audits and penetration testing',
        'Role-based access controls',
      ],
      color: 'red',
    },
    {
      id: 'performance',
      name: 'Lightning Fast',
      icon: <Zap className="h-6 w-6" />,
      description: 'Blazing fast performance with optimized algorithms',
      highlight: '100ms average response time',
      info: [
        'Global edge network for minimal latency',
        'Automatic caching mechanisms',
        'Optimized database queries',
        'Performance monitoring and alerts',
      ],
      color: 'amber',
    },
    {
      id: 'responsive',
      name: 'Fully Responsive',
      icon: <Smartphone className="h-6 w-6" />,
      description: 'Perfect user experiences across all devices',
      highlight: 'Mobile-first design approach',
      info: [
        'Adaptive layouts for any screen size',
        'Touch-optimized interactions',
        'Responsive images and media',
        'Consistent performance on all devices',
      ],
      color: 'blue',
    },
    {
      id: 'analytics',
      name: 'Advanced Analytics',
      icon: <LineChart className="h-6 w-6" />,
      description: 'Gain deep insights into your business performance',
      highlight: 'Real-time data visualization',
      info: [
        'Custom dashboard creation',
        'Predictive analytics powered by AI',
        'Goal tracking and conversion funnels',
        'Exportable reports in multiple formats',
      ],
      color: 'violet',
    },
    {
      id: 'payments',
      name: 'Secure Payments',
      icon: <Lock className="h-6 w-6" />,
      description: 'Accept payments securely with our payment gateway',
      highlight: 'PCI DSS Level 1 compliance',
      info: [
        'Support for 50+ payment methods',
        'Anti-fraud detection systems',
        'Subscription billing management',
        'Split payments and marketplace capabilities',
      ],
      color: 'green',
    },
    {
      id: 'uploads',
      name: 'Fast File Uploads',
      icon: <Upload className="h-6 w-6" />,
      description: 'Upload and process files with ease',
      highlight: 'Drag-and-drop interface',
      info: [
        'Multi-file upload support',
        'Auto-compression for images',
        'Progress tracking and resumable uploads',
        'Virus scanning and file validation',
      ],
      color: 'cyan',
    },
    {
      id: 'search',
      name: 'Intelligent Search',
      icon: <Search className="h-6 w-6" />,
      description: 'Find what you need with our powerful search engine',
      highlight: 'Natural language processing',
      info: [
        'Typo-tolerant search algorithm',
        'Contextual result ranking',
        'Faceted search with filters',
        'Search analytics to improve results',
      ],
      color: 'purple',
    },
    {
      id: 'scaling',
      name: 'Infinite Scaling',
      icon: <Layers className="h-6 w-6" />,
      description: 'Scale seamlessly as your business grows',
      highlight: 'Horizontal and vertical scaling',
      info: [
        'Auto-scaling infrastructure',
        'Load balancing across regions',
        'Database sharding for high volume',
        'Performance maintained at any scale',
      ],
      color: 'indigo',
    },
    {
      id: 'notifications',
      name: 'Smart Alerts',
      icon: <BellRing className="h-6 w-6" />,
      description: 'Stay informed with intelligent notifications',
      highlight: 'Customizable alert preferences',
      info: [
        'Real-time notifications across devices',
        'Priority-based alert system',
        'Scheduled and digest notifications',
        'In-app and email delivery options',
      ],
      color: 'pink',
    },
    {
      id: 'collaboration',
      name: 'Team Collaboration',
      icon: <Users className="h-6 w-6" />,
      description: 'Work together seamlessly with your team',
      highlight: 'Real-time document editing',
      info: [
        'Comment and feedback tools',
        'Task assignment and tracking',
        'Version history and change logs',
        'Team activity dashboard',
      ],
      color: 'blue',
    },
    {
      id: 'monitoring',
      name: 'System Monitoring',
      icon: <Activity className="h-6 w-6" />,
      description: "Keep track of your system's health and performance",
      highlight: '24/7 automated monitoring',
      info: [
        'Custom alert thresholds',
        'Incident response automation',
        'Historical performance data',
        'Root cause analysis tools',
      ],
      color: 'emerald',
    },
    {
      id: 'biometric',
      name: 'Biometric Auth',
      icon: <Fingerprint className="h-6 w-6" />,
      description: 'Secure access with advanced biometric authentication',
      highlight: 'Facial and fingerprint recognition',
      info: [
        'Multi-factor authentication options',
        'Liveness detection to prevent spoofing',
        'Secure biometric data storage',
        'Fallback authentication methods',
      ],
      color: 'orange',
    },
    {
      id: 'ai',
      name: 'AI-Powered',
      icon: <Microscope className="h-6 w-6" />,
      description: 'Leverage artificial intelligence throughout the platform',
      highlight: 'Machine learning models',
      info: [
        'Predictive text and suggestions',
        'Content moderation and filtering',
        'Automated data categorization',
        'Personalized user experiences',
      ],
      color: 'fuchsia',
    },
    {
      id: 'customization',
      name: 'Deep Customization',
      icon: <Cog className="h-6 w-6" />,
      description: 'Tailor the platform to your specific needs',
      highlight: 'No-code customization tools',
      info: [
        'Custom fields and data models',
        'Workflow and automation builder',
        'White-label branding options',
        'Custom CSS and styling support',
      ],
      color: 'slate',
    },
    {
      id: 'integrations',
      name: 'Seamless Integration',
      icon: <RefreshCcw className="h-6 w-6" />,
      description: 'Connect with your favorite tools and services',
      highlight: '200+ pre-built integrations',
      info: [
        'Open API and webhook support',
        'OAuth and SSO capabilities',
        'Data sync across platforms',
        'Custom integration development',
      ],
      color: 'sky',
    },
    {
      id: 'backup',
      name: 'Automated Backups',
      icon: <Database className="h-6 w-6" />,
      description: 'Never lose your data with automatic backups',
      highlight: 'Point-in-time recovery',
      info: [
        'Daily automated backups',
        'Geo-redundant storage',
        'Encrypted backup files',
        'One-click restoration process',
      ],
      color: 'rose',
    },
    {
      id: 'documentation',
      name: 'Comprehensive Docs',
      icon: <BookOpen className="h-6 w-6" />,
      description: 'Detailed documentation for all features',
      highlight: 'Interactive code examples',
      info: [
        'Step-by-step tutorials',
        'Searchable knowledge base',
        'API reference documentation',
        'Video walkthroughs and demos',
      ],
      color: 'yellow',
    },
    {
      id: 'media',
      name: 'Rich Media Support',
      icon: <img className="h-6 w-6" />,
      description: 'Handle images, videos, and other media with ease',
      highlight: 'Automatic optimization',
      info: [
        'Image cropping and resizing',
        'Video transcoding and streaming',
        'Media CDN for fast delivery',
        'Audio processing and captioning',
      ],
      color: 'lime',
    },
    {
      id: 'speed',
      name: 'Performance Metrics',
      icon: <Gauge className="h-6 w-6" />,
      description: "Monitor and optimize your site's performance",
      highlight: 'Core Web Vitals tracking',
      info: [
        'Page load speed analysis',
        'Resource utilization monitoring',
        'Performance improvement suggestions',
        'Lighthouse score integration',
      ],
      color: 'red',
    },
    {
      id: 'multiplatform',
      name: 'Cross-Platform',
      icon: <Tablet className="h-6 w-6" />,
      description: 'Use on any device or operating system',
      highlight: 'Native apps for all platforms',
      info: [
        'iOS and Android mobile apps',
        'Desktop applications',
        'Progressive web app support',
        'Offline functionality',
      ],
      color: 'teal',
    },
    {
      id: 'seo',
      name: 'SEO Optimization',
      icon: <Highlighter className="h-6 w-6" />,
      description: 'Improve your search engine rankings',
      highlight: 'Automated SEO suggestions',
      info: [
        'Metadata and schema markup',
        'Semantic HTML structure',
        'Performance optimization for ranking',
        'SEO audit and reporting tools',
      ],
      color: 'blue',
    },
    {
      id: 'support',
      name: '24/7 Support',
      icon: <Rocket className="h-6 w-6" />,
      description: 'Get help when you need it from our expert team',
      highlight: '10 minute average response time',
      info: [
        'Chat, email, and phone support',
        'Dedicated customer success manager',
        'Priority support for enterprise plans',
        'Comprehensive help center',
      ],
      color: 'green',
    },
    {
      id: 'designtools',
      name: 'Design Tools',
      icon: <Palette className="h-6 w-6" />,
      description: 'Create beautiful interfaces with our design tools',
      highlight: 'Built-in design system',
      info: [
        'Component library and templates',
        'Visual design editor',
        'Theme customization',
        'Accessibility compliance tools',
      ],
      color: 'pink',
    },
    {
      id: 'devtools',
      name: 'Developer Tools',
      icon: <Code2 className="h-6 w-6" />,
      description: 'Powerful tools for developers to extend functionality',
      highlight: 'Comprehensive API access',
      info: [
        'SDK for multiple languages',
        'CLI for automation tasks',
        'Webhook management',
        'Custom plugin development',
      ],
      color: 'indigo',
    },
    {
      id: 'cloud',
      name: 'Cloud Infrastructure',
      icon: <CloudCog className="h-6 w-6" />,
      description: 'Reliable and secure cloud hosting for your applications',
      highlight: '99.99% uptime guarantee',
      info: [
        'Distributed infrastructure',
        'Automatic failover systems',
        'Regional data compliance',
        'Scalable compute resources',
      ],
      color: 'cyan',
    },
    {
      id: 'errors',
      name: 'Error Monitoring',
      icon: <AlertTriangle className="h-6 w-6" />,
      description: 'Catch and fix errors before they impact users',
      highlight: 'Real-time error tracking',
      info: [
        'Detailed error context',
        'Error grouping and prioritization',
        'Performance impact analysis',
        'Integration with issue trackers',
      ],
      color: 'amber',
    },
    {
      id: 'enterprise',
      name: 'Enterprise Ready',
      icon: <Building2 className="h-6 w-6" />,
      description: 'Features designed for large organization needs',
      highlight: 'SSO and SCIM provisioning',
      info: [
        'Enterprise legal agreements',
        'Compliance certifications',
        'Custom SLAs and support plans',
        'Dedicated environment options',
      ],
      color: 'slate',
    },
    {
      id: 'network',
      name: 'Global Network',
      icon: <Network className="h-6 w-6" />,
      description: 'Worldwide infrastructure for optimal performance',
      highlight: '30+ data centers globally',
      info: [
        'Regional routing optimization',
        'DDoS protection included',
        'Anycast DNS infrastructure',
        'Low-latency global connectivity',
      ],
      color: 'violet',
    },
    {
      id: 'automation',
      name: 'Workflow Automation',
      icon: <Wand2 className="h-6 w-6" />,
      description: 'Automate routine tasks and business processes',
      highlight: 'Visual workflow builder',
      info: [
        'Trigger-based automation',
        'Conditional logic and branching',
        'Scheduled tasks and batching',
        'Integration with external services',
      ],
      color: 'purple',
    },
    {
      id: 'certified',
      name: 'Certified Quality',
      icon: <CheckCircle2 className="h-6 w-6" />,
      description: 'Industry-recognized quality and reliability',
      highlight: 'ISO 27001 certified',
      info: [
        'Regular quality audits',
        'Comprehensive test coverage',
        'Release quality metrics',
        'Strict quality standards',
      ],
      color: 'green',
    },
    {
      id: 'compatibility',
      name: 'Browser Compatibility',
      icon: <Computer className="h-6 w-6" />,
      description: 'Works flawlessly across all modern browsers',
      highlight: 'IE11+ and all modern browsers',
      info: [
        'Cross-browser testing',
        'Degradation graceful handling',
        'Performance optimization for each browser',
        'Mobile browser support',
      ],
      color: 'blue',
    },
    {
      id: 'aifeatures',
      name: 'AI Features',
      icon: <Stars className="h-6 w-6" />,
      description: 'Cutting-edge AI capabilities throughout the platform',
      highlight: 'GPT-4 powered assistance',
      info: [
        'Natural language processing',
        'Image recognition and analysis',
        'Predictive analytics',
        'Automated content generation',
      ],
      color: 'fuchsia',
    },
  ];

  return (
    <section className="bg-background w-full py-12 md:py-24">
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
        <div className="mb-12 flex flex-col items-center justify-center space-y-4 text-center">
          <Badge className="px-3.5 py-1.5">Features</Badge>
          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
            Powerful Capabilities at Your Fingertips
          </h2>
          <p className="text-muted-foreground max-w-[700px] md:text-lg">
            Discover all the features that make our platform stand out from the
            competition
          </p>
        </div>

        <TooltipProvider delayDuration={300}>
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 md:gap-6 lg:grid-cols-6">
            {iconFeatures.map((feature) => (
              <Tooltip key={feature.id}>
                <TooltipTrigger asChild>
                  <div
                    className={cn(
                      'flex flex-col items-center rounded-lg p-4 text-center transition-all duration-200',
                      'hover:bg-muted cursor-pointer'
                    )}
                  >
                    <div
                      className={cn(
                        'mb-3 flex h-14 w-14 items-center justify-center rounded-full',
                        `bg-${feature.color}-100`,
                        `text-${feature.color}-600`
                      )}
                    >
                      {feature.icon}
                    </div>
                    <h3 className="text-sm font-medium">{feature.name}</h3>
                  </div>
                </TooltipTrigger>
                <TooltipContent
                  side="top"
                  className="max-w-[250px] space-y-2 p-4"
                >
                  <div className="space-y-1.5">
                    <h4 className="font-semibold">{feature.name}</h4>
                    <p className="text-muted-foreground text-sm">
                      {feature.description}
                    </p>
                    {feature.highlight && (
                      <p className="text-primary text-xs font-medium">
                        {feature.highlight}
                      </p>
                    )}
                  </div>
                  {feature.info && feature.info.length > 0 && (
                    <div className="border-border border-t pt-2">
                      <ul className="space-y-1 text-xs">
                        {feature.info.map((item, index) => (
                          <li key={index} className="flex items-start gap-1.5">
                            <CheckCircle2 className="mt-0.5 h-3 w-3 shrink-0 text-green-500" />
                            <span>{item}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}
                </TooltipContent>
              </Tooltip>
            ))}
          </div>
        </TooltipProvider>

        <div className="mt-16 flex flex-col justify-center gap-4 sm:flex-row">
          <Button size="lg" className="group" asChild>
            <a href="#">
              Explore all features in detail
              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
            </a>
          </Button>
          <Button variant="outline" size="lg" asChild>
            <a href="#">
              Schedule a demo
              <ArrowRight className="ml-2 h-4 w-4" />
            </a>
          </Button>
        </div>
      </div>
    </section>
  );
}
```

### `components/ui/badge.tsx`

```tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
        secondary:
          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
        destructive:
          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
        outline:
          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
        ghost:
          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
        link: "text-primary underline-offset-4 hover:underline",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "span"

  return (
    <Comp
      data-slot="badge"
      data-variant={variant}
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
```

### `components/ui/button.tsx`

```tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/80",
        outline:
          "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
        ghost:
          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
        destructive:
          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default:
          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        icon: "size-9",
        "icon-xs":
          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
        "icon-sm":
          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
        "icon-lg": "size-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot.Root : "button"

  return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
```

### `components/ui/tooltip.tsx`

```tsx
"use client"

import * as React from "react"
import { Tooltip as TooltipPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  arrow = true,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
  /** Hide the pointer arrow (custom-surfaced tooltips, e.g. the app's dark
   *  menu-styled ones, where the bg-foreground diamond clashes). */
  arrow?: boolean
}) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
          className
        )}
        {...props}
      >
        {children}
        {arrow && (
          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
        )}
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
```