diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts
index db3812ba6c3941cf291ab9f2ed6819a80b609fd8..d50334d3be9ab3614fb00c832a11d3bdfc45a2bd 100644
--- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts
+++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts
@@ -37,7 +37,7 @@ import { TooltipPosition } from './tooltip.directive';
     [class.text-nowrap]="!width"
     [style.left.px]="left"
     [style.top.px]="top"
-    [style.width.px]="width"
+    [style.width.rem]="width"
     [style.--before-left.px]="leftOffset"
     [attr.id]="id"
     role="tooltip"
diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts
index cbbf2dce28158345c5bf0690e67a9b7e1a5e3bf6..4ed62c57eee3b2cacea3caf9e04b0b3858e39bdf 100644
--- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts
@@ -26,7 +26,7 @@ import { ComponentRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { faker } from '@faker-js/faker/.';
 import { TooltipComponent } from './tooltip.component';
-import { TooltipDirective, TooltipPosition } from './tooltip.directive';
+import { MAX_WIDTH, REM, TooltipDirective, TooltipPosition } from './tooltip.directive';
 
 class MockElementRef extends ElementRef {
   nativeElement = {
@@ -186,6 +186,12 @@ describe('TooltipDirective', () => {
       expect(directive.attachedToFocused).toBeTruthy();
     });
 
+    it('should set tooltip width', () => {
+      directive.showTooltip();
+
+      expect(directive.setWidth).toHaveBeenCalled();
+    });
+
     it('should set tooltip properties after tick', fakeAsync(() => {
       directive.showTooltip();
 
@@ -266,6 +272,32 @@ describe('TooltipDirective', () => {
     });
   });
 
+  describe('setWidth', () => {
+    it('should set max width', () => {
+      directive.componentRef = Object.assign(mockComponentRef, {
+        location: {
+          nativeElement: { children: [{ getBoundingClientRect: jest.fn().mockReturnValue({ width: MAX_WIDTH * REM + 100 }) }] },
+        },
+      });
+
+      directive.setWidth();
+
+      expect(directive.componentRef.instance.width).toBe(MAX_WIDTH);
+    });
+
+    it('should unset width', () => {
+      directive.componentRef = Object.assign(mockComponentRef, {
+        location: {
+          nativeElement: { children: [{ getBoundingClientRect: jest.fn().mockReturnValue({ width: MAX_WIDTH * REM - 100 }) }] },
+        },
+      });
+
+      directive.setWidth();
+
+      expect(directive.componentRef.instance.width).toBe(null);
+    });
+  });
+
   describe('setAutoPosition', () => {
     it('should set tooltip position above if it cannot be displayed below', () => {
       directive.tooltipPosition = TooltipPosition.BELOW;
diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts
index 8d6302044b8805ca93b9b90517396d378f64706f..e4650402b1f090849c9f5827c9482c7de107b3cd 100644
--- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts
+++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts
@@ -42,6 +42,9 @@ export enum TooltipPosition {
   BELOW = 'below',
 }
 
+export const REM = 16;
+export const MAX_WIDTH = 24; // Max tooltip width in rem
+
 const OUTLINE_INDENT = 4; // Outline offset (2) + outline width (2)
 type TooltipAriaType = 'aria-describedby' | 'aria-labelledby';
 
@@ -139,6 +142,15 @@ export class TooltipDirective implements OnDestroy {
     this.componentRef.instance.show = true;
   }
 
+  setWidth(): void {
+    const currentWidth: number = this.componentRef.location.nativeElement.children[0].getBoundingClientRect().width;
+    if (currentWidth >= MAX_WIDTH * REM) {
+      this.componentRef.instance.width = MAX_WIDTH;
+    } else {
+      this.componentRef.instance.width = null;
+    }
+  }
+
   setAutoPosition(tooltipHeight: number, parentRect: DOMRect, windowHeight: number): void {
     const { top, bottom } = parentRect;
 
@@ -210,15 +222,6 @@ export class TooltipDirective implements OnDestroy {
     return parentBottom + (attachedToFocused ? OUTLINE_INDENT : 0);
   }
 
-  setWidth(): void {
-    const currentWidth: number = this.componentRef.location.nativeElement.children[0].getBoundingClientRect().width;
-    if (currentWidth >= 360) {
-      this.componentRef.instance.width = 360;
-    } else {
-      this.componentRef.instance.width = null;
-    }
-  }
-
   hide(): void {
     if (isNull(this.componentRef)) {
       return;