diff --git a/src/tooltip.css.ts b/src/tooltip.css.ts index a301bff730..38643ee590 100644 --- a/src/tooltip.css.ts +++ b/src/tooltip.css.ts @@ -135,10 +135,6 @@ export const container = style([ }, ]); -export const fullWidth = style({ - width: '100%', -}); - export const enter = style({ transform: enterTransform, }); diff --git a/src/tooltip.tsx b/src/tooltip.tsx index c913b0bd68..4b144b6a5d 100644 --- a/src/tooltip.tsx +++ b/src/tooltip.tsx @@ -17,7 +17,7 @@ import type {DataAttributes} from './utils/types'; const defaultPositionDesktop = 'bottom'; const defaultPositionMobile = 'top'; const arrowSize = 12; -const minWidth = 40; +const minWidth = 45; const distanceToTarget = 4 + arrowSize; const transitionDurationMs = 500; const animationMovement = 12; @@ -106,7 +106,6 @@ type Props = { targetLabel: string; delay?: boolean; dataAttributes?: DataAttributes; - fullWidth?: boolean; textAlign?: TextAlign; changedPosition?: string; }; @@ -120,7 +119,6 @@ const Tooltip: React.FC = ({ targetLabel, delay = true, dataAttributes, - fullWidth, changedPosition, ...rest }) => { @@ -311,7 +309,7 @@ const Tooltip: React.FC = ({ } const tooltipBoundingClientRect = tooltipRef.current.getBoundingClientRect(); - const containerAlign = tooltipBoundingClientRect.width !== minWidth ? 'left' : 'center'; + const containerAlign = tooltipBoundingClientRect.width >= minWidth ? 'left' : 'center'; return containerAlign; }; @@ -341,13 +339,11 @@ const Tooltip: React.FC = ({ } }, [isVisible, getContainerPosition, position, width]); - const targetStyle = fullWidth && styles.fullWidth; - return ( <>
{ if (closeTooltipTimeoutId.current) { clearTimeout(closeTooltipTimeoutId.current);