tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
25 lines (24 loc) • 1.3 kB
TypeScript
import React from "react";
/**
* `Tooltip` is a hover/focus popup for displaying contextual information, supporting theming, position, and custom styles.
*
* @param {object} props - The properties to customize the `Tooltip` component.
* @param {React.ReactNode} props.content - The content to display inside the tooltip.
* @param {React.ReactNode} props.children - The element that triggers the tooltip on hover/focus.
* @param {"top" | "bottom" | "left" | "right"} [props.position="top"] - Position of the tooltip relative to the trigger.
* @param {React.CSSProperties} [props.styles] - Custom styles for the tooltip popup.
* @param {string} [props.className] - Additional className for the tooltip container.
* @param {number} [props.transitionDuration=180] - Duration of the tooltip fade/slide animation in ms.
*
* @returns {JSX.Element} A styled tooltip component.
*/
export interface TooltipProps {
content: React.ReactNode;
children: React.ReactNode;
position?: "top" | "bottom" | "left" | "right";
styles?: React.CSSProperties;
className?: string;
transitionDuration?: number;
}
declare const Tooltip: ({ content, children, position, styles, className, transitionDuration, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
export default Tooltip;