its-just-ui
Version:
ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.
95 lines (94 loc) • 3.24 kB
TypeScript
export type TooltipVariant = 'default' | 'filled' | 'outlined' | 'flat' | 'elevated';
export type TooltipSize = 'sm' | 'md' | 'lg';
export type TooltipStatus = 'default' | 'success' | 'warning' | 'error';
export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
export type TooltipTransition = 'none' | 'fade' | 'slide' | 'scale' | 'bounce';
export interface TooltipCustomStyles {
borderWidth?: string;
borderColor?: string;
borderStyle?: string;
borderRadius?: string;
fontSize?: string;
fontWeight?: string;
fontFamily?: string;
textColor?: string;
placeholderColor?: string;
backgroundColor?: string;
focusRingColor?: string;
focusRingWidth?: string;
focusRingOffset?: string;
focusBorderColor?: string;
focusBackgroundColor?: string;
boxShadow?: string;
focusBoxShadow?: string;
padding?: string;
paddingX?: string;
paddingY?: string;
arrowStyles?: React.CSSProperties;
contentStyles?: React.CSSProperties;
triggerStyles?: React.CSSProperties;
}
export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
isOpen?: boolean;
defaultIsOpen?: boolean;
onOpenChange?: (isOpen: boolean) => void;
disabled?: boolean;
content?: React.ReactNode;
title?: string;
description?: string;
variant?: TooltipVariant;
size?: TooltipSize;
status?: TooltipStatus;
placement?: TooltipPlacement;
offset?: number;
delayOpen?: number;
delayClose?: number;
autoPlacement?: boolean;
offsetX?: number;
offsetY?: number;
nudgeLeft?: number;
nudgeRight?: number;
nudgeTop?: number;
nudgeBottom?: number;
trigger?: 'hover' | 'click' | 'focus' | 'manual';
showArrow?: boolean;
arrowSize?: number;
arrowColor?: string;
transition?: TooltipTransition;
transitionDuration?: number;
containerClassName?: string;
containerStyle?: React.CSSProperties;
maxWidth?: string;
minWidth?: string;
width?: string;
customStyles?: TooltipCustomStyles;
contentBackgroundColor?: string;
contentBorderWidth?: string;
contentBorderColor?: string;
contentBorderRadius?: string;
contentPadding?: string;
contentBoxShadow?: string;
titleColor?: string;
titleFontSize?: string;
titleFontWeight?: string;
titleFontFamily?: string;
descriptionColor?: string;
descriptionFontSize?: string;
descriptionFontWeight?: string;
descriptionFontFamily?: string;
loading?: boolean;
loadingMessage?: string;
emptyMessage?: string;
required?: boolean;
label?: React.ReactNode;
helperText?: React.ReactNode;
renderContent?: (isOpen: boolean) => React.ReactNode;
renderTrigger?: (isOpen: boolean, triggerProps: React.HTMLAttributes<HTMLElement>) => React.ReactNode;
children?: React.ReactNode;
}
export interface TooltipTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
export interface TooltipContentProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}