Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 2x 33x 33x 33x 33x 33x 33x 33x 1x 1x 33x 12x 12x 33x 33x 33x 33x 3x 33x 8x 33x 1x 33x 2x 33x 1x 33x | import React, { useState, useEffect, useRef } from "react";
export type TooltipPosition = "top" | "bottom" | "left" | "right";
interface TooltipProps {
/** The text content to display in the tooltip */
content: string;
/** The element(s) that will trigger the tooltip on hover/focus */
children: React.ReactNode;
/** Position of the tooltip relative to the children. Defaults to "top" */
position?: TooltipPosition;
/** Additional CSS classes to apply to the wrapper element */
className?: string;
}
/**
* Mobile-first tooltip component that displays informative text on hover, focus, or tap
*
* Features:
* - Touch-friendly: Tap to toggle on mobile devices
* - Responsive: Adjusts width for smaller screens
* - Accessible: Supports keyboard navigation
* - Auto-dismiss: Closes when clicking outside
*
* @example
* ```tsx
* <Tooltip content="This is helpful information" position="top">
* <button>Hover me</button>
* </Tooltip>
* ```
*/
export const Tooltip: React.FC<TooltipProps> = ({
content,
children,
position = "top",
className = "",
}) => {
const [isVisible, setIsVisible] = useState(false);
const tooltipRef = useRef<HTMLSpanElement>(null);
const wrapperRef = useRef<HTMLSpanElement>(null);
const positionClasses = {
top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
left: "right-full top-1/2 -translate-y-1/2 mr-2",
right: "left-full top-1/2 -translate-y-1/2 ml-2",
};
const arrowClasses = {
top: "top-full left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent border-t-gray-900",
bottom:
"bottom-full left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent border-b-gray-900",
left: "left-full top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-gray-900",
right:
"right-full top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-gray-900",
};
// Handle click outside to close tooltip on mobile
useEffect(() => {
const handleClickOutside = (event: MouseEvent | TouchEvent) => {
Eif (
wrapperRef.current &&
!wrapperRef.current.contains(event.target as Node)
) {
setIsVisible(false);
}
};
if (isVisible) {
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("touchstart", handleClickOutside);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("touchstart", handleClickOutside);
};
}, [isVisible]);
const handleToggle = () => {
setIsVisible((prev) => !prev);
};
const handleMouseEnter = () => {
setIsVisible(true);
};
const handleMouseLeave = () => {
setIsVisible(false);
};
const handleFocus = () => {
setIsVisible(true);
};
const handleBlur = () => {
setIsVisible(false);
};
return (
<span ref={wrapperRef} className={`relative inline-block ${className}`}>
<span
onClick={handleToggle}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onFocus={handleFocus}
onBlur={handleBlur}
className="cursor-pointer touch-manipulation"
role="button"
tabIndex={0}
aria-label="Show more information"
>
{children}
</span>
{isVisible && (
<span
ref={tooltipRef}
role="tooltip"
className={`absolute z-50 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-lg
max-w-[200px] sm:max-w-xs md:whitespace-nowrap
animate-in fade-in duration-150
${positionClasses[position]}`}
>
<span className="block break-words">{content}</span>
<span
className={`absolute w-0 h-0 border-4 ${arrowClasses[position]}`}
/>
</span>
)}
</span>
);
};
|