feat: add max-width and adjust styling of tooltip image and descripti…

…on text (#2115)
Frontify · Nov 26, 2024 · fd1da3c · fd1da3c
1 parent 8889a65
commit fd1da3c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/honest-hounds-work.md b/.changeset/honest-hounds-work.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-charts": patch
+---
+
+adjust chart tooltip styling to accomodate very long titles used in combination with tooltip preview images
diff --git a/packages/charts/src/components/common/components/Tooltip/TooltipContent.tsx b/packages/charts/src/components/common/components/Tooltip/TooltipContent.tsx
@@ -21,10 +21,10 @@ export const TooltipContent = ({ title, description, imageUrl, entries }: Toolti
     const dataPoint = entries[1];
 
     return (
-        <div className="tw-bg-[var(--text-color)] tw-p-3 tw-rounded tw-border tw-border-button-border">
+        <div className="tw-bg-[var(--text-color)] tw-p-3 tw-rounded tw-border tw-border-button-border tw-max-w-[260px]">
             {imageUrl && (
                 <div className="tw--m-1">
-                    <img src={imageUrl} alt={description} className="tw-w-48 tw-h-28 tw-object-cover tw-mb-5" />
+                    <img src={imageUrl} alt={description} className="tw-h-28 tw-object-cover tw-mb-5 tw-w-full" />
                 </div>
             )}
             <div className={title ? 'tw-pb-3' : ''}>
@@ -37,7 +37,9 @@ export const TooltipContent = ({ title, description, imageUrl, entries }: Toolti
                 {descriptionLines.length > 0 && (
                     <div className="tw-text-base tw-text-xs">
                         {descriptionLines.map((line) => (
-                            <div key={line}>{line}</div>
+                            <div key={line} className="tw-truncate">
+                                {line}
+                            </div>
                         ))}
                     </div>
                 )}