Tooltip

<!-- Basic Tooltip -->
<div class="lyd-tooltip">
    <button class="lyd-button primary">Hover me</button>
    <div class="lyd-tooltip-content top">Tooltip text</div>
</div>

<!-- Multi-line Tooltip -->
<div class="lyd-tooltip">
    <button class="lyd-button primary">Hover for details</button>
    <div class="lyd-tooltip-content large top">
        This is a longer tooltip with multiple lines of text.
    </div>
</div>

import { ReactNode } from 'react';

interface TooltipProps {
  children: ReactNode;
  content: string;
  position?: 'top' | 'bottom' | 'left' | 'right';
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
  size?: 'default' | 'large';
}

export const Tooltip = ({ 
  children, 
  content, 
  position = 'top',
  variant = 'default',
  size = 'default'
}: TooltipProps) => {
  const tooltipClasses = [
    'lyd-tooltip-content',
    position,
    variant !== 'default' && variant,
    size !== 'default' && size
  ].filter(Boolean).join(' ');
  
  return (
    <div className="lyd-tooltip">
      {children}
      <div className={tooltipClasses}>
        {content}
      </div>
    </div>
  );
};