Simple Tooltip

'use client';

import type { HTMLAttributes, ReactNode } from 'react';
import './SimpleTooltip.css';

/**
 * SimpleTooltip — A lightweight hover-based hint for buttons or icons (pure CSS).
 *
 * @param text - Required. Tooltip text.
 * @param position - Optional. 'top' | 'bottom' | 'left' | 'right'. Default 'top'.
 */
export interface SimpleTooltipProps extends HTMLAttributes<HTMLDivElement> {
  text: string;
  position?: 'top' | 'bottom' | 'left' | 'right';
  children?: ReactNode;
}

export function SimpleTooltip({ text, position = 'top', className, children, ...rest }: SimpleTooltipProps) {
  return (
    <div {...rest} className={['tooltip-wrap', `tooltip-wrap--${position}`, className].filter(Boolean).join(' ')} data-tip={text}>
      {children}
    </div>
  );
}

export default SimpleTooltip;

/* SimpleTooltip — ported from astro-component-kit (feedback/SimpleTooltip.astro) */

.tooltip-wrap { 
  position: relative; 
  display: inline-flex; 
  cursor: help; 
}

.tooltip-wrap::after { 
  content: attr(data-tip); 
  position: absolute; 
  padding: var(--sp-2, 6px) var(--sp-3, 12px); 
  background: var(--c-bg-elev, #111); 
  color: var(--c-text-1, #fff); 
  font-size: 0.72rem; 
  font-weight: 600;
  border-radius: var(--r-sm, 6px); 
  white-space: nowrap; 
  opacity: 0; 
  pointer-events: none; 
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
  z-index: 100;
}

/* Positions */
.tooltip-wrap--top::after { bottom: 125%; left: 50%; transform: translateX(-50%) translateY(5px); }
.tooltip-wrap--bottom::after { top: 125%; left: 50%; transform: translateX(-50%) translateY(-5px); }
.tooltip-wrap--left::after { right: 125%; top: 50%; transform: translateY(-50%) translateX(5px); }
.tooltip-wrap--right::after { left: 125%; top: 50%; transform: translateY(-50%) translateX(-5px); }

/* Hover States */
.tooltip-wrap:hover::after { 
  opacity: 1; 
}
.tooltip-wrap--top:hover::after { transform: translateX(-50%) translateY(0); }
.tooltip-wrap--bottom:hover::after { transform: translateX(-50%) translateY(0); }
.tooltip-wrap--left:hover::after { transform: translateY(-50%) translateX(0); }
.tooltip-wrap--right:hover::after { transform: translateY(-50%) translateX(0); }