Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.6 kB · 67 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,} from "@openstatus/ui/components/ui/tooltip";import { cn } from "@openstatus/ui/lib/utils";import React, { useEffect, useRef, useState } from "react";
interface TextWithTooltipProps { text: string | number; className?: string; style?: React.CSSProperties;}
export function TextWithTooltip({ text, className, style,}: TextWithTooltipProps) { const [isTruncated, setIsTruncated] = useState<boolean>(false); const textRef = useRef<HTMLDivElement>(null);
useEffect(() => { const checkTruncation = () => { if (textRef.current) { const { scrollWidth, clientWidth } = textRef.current; setIsTruncated(scrollWidth > clientWidth); } };
const resizeObserver = new ResizeObserver(() => { checkTruncation(); });
if (textRef.current) { resizeObserver.observe(textRef.current); }
checkTruncation();
return () => { resizeObserver.disconnect(); }; }, []);
return ( <TooltipProvider delayDuration={100} disableHoverableContent> <Tooltip> <TooltipTrigger disabled={!isTruncated} asChild> <div ref={textRef} className={cn( "truncate", !isTruncated && "pointer-events-none", className, )} style={style} > {text} </div> </TooltipTrigger> <TooltipContent>{text}</TooltipContent> </Tooltip> </TooltipProvider> );}