Tooltips

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function TooltipsSection() {
29  const positions = [
30    { label: 'Top', pos: 'top', btnCls: 'col-start-2' },
31    { label: 'Right', pos: 'right', btnCls: 'col-start-3' },
32    { label: 'Bottom', pos: 'bottom', btnCls: 'col-start-2' },
33    { label: 'Left', pos: 'left', btnCls: 'col-start-1' },
34  ] as const;
35
36  const [hoveredTooltip, setHoveredTooltip] = useState<string | null>(null);
37
38  const getTooltipClasses = (pos: string) => {
39    const base = 'absolute z-50 whitespace-nowrap rounded-lg bg-gray-800 px-3 py-1.5 text-xs font-medium text-white shadow-theme-lg dark:bg-gray-200 dark:text-gray-800 pointer-events-none transition-opacity';
40    switch (pos) {
41      case 'top': return `${base} bottom-full left-1/2 -translate-x-1/2 mb-2`;
42      case 'bottom': return `${base} top-full left-1/2 -translate-x-1/2 mt-2`;
43      case 'left': return `${base} right-full top-1/2 -translate-y-1/2 mr-2`;
44      case 'right': return `${base} left-full top-1/2 -translate-y-1/2 ml-2`;
45      default: return base;
46    }
47  };
48
49  return (
50    <SectionCard title="Tooltips" sourceSlug="/ui/source/ui-elements/tooltips">
51      <div className="flex flex-wrap gap-4">
52        {positions.map((p) => (
53          <div key={p.label} className="relative" onMouseEnter={() => setHoveredTooltip(p.label)} onMouseLeave={() => setHoveredTooltip(null)}>
54            <button className="rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-600 transition-colors">
55              {p.label}
56            </button>
57            {hoveredTooltip === p.label && (
58              <div className={getTooltipClasses(p.pos)}>
59                Tooltip on {p.label}
60              </div>
61            )}
62          </div>
63        ))}
64      </div>
65    </SectionCard>
66  );
67}