fix: add tooltip length (pinterest#1192)

CAI-TECHNOLOGIES · Apr 11, 2023 · fd972a0 · fd972a0
1 parent cd61615
commit fd972a0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/querybook/webapp/components/DataTableView/DataTableHeader.tsx b/querybook/webapp/components/DataTableView/DataTableHeader.tsx
@@ -151,6 +151,7 @@ export const DataTableHeader: React.FunctionComponent<IDataTableHeader> = ({
                         weight="bold"
                         color="lightest"
                         tooltip={ownerType.description}
+                        tooltipPos="right"
                     >
                         {ownerType.display_name}
                     </AccentText>

diff --git a/querybook/webapp/const/tooltip.ts b/querybook/webapp/const/tooltip.ts
@@ -1 +1,9 @@
 export type TooltipDirection = 'up' | 'down' | 'left' | 'right';
+// By default, tooltips will be single-line no matter their length.
+export type TooltipLength =
+    | 'small'
+    | 'medium'
+    | 'medium'
+    | 'xlarge'
+    | 'fit'
+    | undefined;
diff --git a/querybook/webapp/ui/Tag/Tag.tsx b/querybook/webapp/ui/Tag/Tag.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { ColorPalette } from 'const/chartColors';
-import { TooltipDirection } from 'const/tooltip';
+import { TooltipDirection, TooltipLength } from 'const/tooltip';
 
 import './Tag.scss';
 
@@ -33,10 +33,12 @@ export interface ITagProps {
 export const TagGroup = styled.div.attrs<{
     tooltip?: string;
     tooltipPos?: TooltipDirection;
+    tooltipLength?: TooltipLength;
     className?: string;
-}>(({ tooltip, tooltipPos, className }) => ({
+}>(({ tooltip, tooltipPos, tooltipLength = 'large', className }) => ({
     'aria-label': tooltip,
     'data-balloon-pos': tooltipPos,
+    'data-balloon-length': tooltipLength,
     className: `${className} TagGroup`,
 }))``;