@buddhacognitivelab/theme-glassmorphic
Version:
Enhanced glassmorphic theme package with dual-mode support, advanced glass effects, interactive UI components, and gesture-based interactions
72 lines (71 loc) • 2.64 kB
TypeScript
/**
* @fileoverview Enhanced Tooltip Component - Phase 4
* Dual-mode glassmorphic tooltip with advanced theme support
*/
import React from 'react';
export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
export type TooltipTrigger = 'hover' | 'click' | 'focus' | 'manual';
export interface EnhancedTooltipProps {
/** Tooltip content */
content: React.ReactNode;
/** Child element that triggers the tooltip */
children: React.ReactElement;
/** Tooltip placement */
placement?: TooltipPlacement;
/** Trigger behavior */
trigger?: TooltipTrigger | TooltipTrigger[];
/** Whether tooltip is visible (for manual trigger) */
visible?: boolean;
/** Delay before showing tooltip (ms) */
showDelay?: number;
/** Delay before hiding tooltip (ms) */
hideDelay?: number;
/** Glass effect intensity */
glassIntensity?: 'subtle' | 'prominent' | 'frosted' | 'crystal' | 'ethereal';
/** Glass depth level */
glassDepth?: 'surface' | 'elevated' | 'floating' | 'modal';
/** Tooltip variant */
variant?: 'default' | 'dark' | 'light' | 'error' | 'warning' | 'success' | 'info';
/** Tooltip size */
size?: 'sm' | 'md' | 'lg';
/** Maximum width */
maxWidth?: string;
/** Enable arrow */
arrow?: boolean;
/** Arrow size */
arrowSize?: number;
/** Z-index */
zIndex?: number;
/** Enable enhanced hover effects */
enhancedHover?: boolean;
/** Enable theme-adaptive styling */
themeAdaptive?: boolean;
/** Custom glass tint override */
glassTint?: string;
/** Enable gradient border */
gradientBorder?: boolean;
/** Animation preset */
animation?: 'none' | 'fade' | 'scale' | 'slide' | 'bounce';
/** Enable backdrop blur */
backdropBlur?: boolean;
/** Disable tooltip */
disabled?: boolean;
/** Portal container */
portalContainer?: Element;
/** Callback when visibility changes */
onVisibilityChange?: (visible: boolean) => void;
/** Custom offset from trigger */
offset?: number;
/** Enable interactive tooltip */
interactive?: boolean;
/** Custom class name */
className?: string;
}
/**
* Enhanced Tooltip Component
*
* A sophisticated glassmorphic tooltip with dual-mode theme support,
* advanced glass effects, and enhanced interactive states.
*/
export declare const EnhancedTooltip: React.ForwardRefExoticComponent<EnhancedTooltipProps & React.RefAttributes<HTMLDivElement>>;
export default EnhancedTooltip;