Skip to content

Commit

Permalink
fix: tools description help cursor & conditional tooltip based on con…
Browse files Browse the repository at this point in the history
…tent length (#1806)
  • Loading branch information
ivyjeong13 authored Feb 20, 2025
1 parent 6adc07f commit 4ce2b43
Showing 1 changed file with 16 additions and 2 deletions.
18 changes: 16 additions & 2 deletions ui/admin/app/components/composed/typography.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { Slot } from "@radix-ui/react-slot";
import { TooltipContentProps } from "@radix-ui/react-tooltip";
import { useEffect, useState } from "react";

Check warning on line 3 in ui/admin/app/components/composed/typography.tsx

View workflow job for this annotation

GitHub Actions / lint

'/home/runner/work/obot/obot/ui/admin/node_modules/react/index.js' imported multiple times
import { useRef } from "react";

Check warning on line 4 in ui/admin/app/components/composed/typography.tsx

View workflow job for this annotation

GitHub Actions / lint

'/home/runner/work/obot/obot/ui/admin/node_modules/react/index.js' imported multiple times

import { cn } from "~/lib/utils";

Expand Down Expand Up @@ -31,9 +33,21 @@ export function Truncate({
tooltipContentProps?: TooltipContentProps;
}) {
const Comp = asChild ? Slot : "p";
const contentRef = useRef<HTMLDivElement>(null);
const [isContentTruncated, setIsContentTruncated] = useState(false);

useEffect(() => {
const element = contentRef.current;
if (!element) return;

// Check if content is actually truncated
const isTruncated = element.scrollHeight > element.clientHeight;
setIsContentTruncated(isTruncated);
}, [children]);

const content = (
<Comp
ref={contentRef}
className={cn(
{
"line-clamp-1": clamp && clampLength === 1,
Expand All @@ -47,7 +61,7 @@ export function Truncate({
</Comp>
);

if (disableTooltip) {
if (disableTooltip || !isContentTruncated) {
return content;
}

Expand All @@ -62,7 +76,7 @@ export function Truncate({
</TooltipContent>

<TooltipTrigger asChild>
<div className={cn("cursor-pointer", className)}>{content}</div>
<div className={cn("cursor-help", className)}>{content}</div>
</TooltipTrigger>
</Tooltip>
);
Expand Down

0 comments on commit 4ce2b43

Please sign in to comment.