diff --git a/web/src/components/HoverTooltip.test.tsx b/web/src/components/HoverTooltip.test.tsx
index 3cebecf7..607a05e3 100644
--- a/web/src/components/HoverTooltip.test.tsx
+++ b/web/src/components/HoverTooltip.test.tsx
@@ -9,6 +9,18 @@ import {
 afterEach(() => cleanup())
 
 describe('HoverTooltip keyboard wiring', () => {
+    it('sizes short localized tooltips to their content up to the maximum width', () => {
+        render(
+            <HoverTooltip id="attention-tooltip" target={<span>dot</span>}>
+                有新活动
+            </HoverTooltip>
+        )
+
+        const tooltip = screen.getByRole('tooltip', { hidden: true })
+        expect(tooltip.className).toContain('w-max')
+        expect(tooltip.className).toContain('max-w-[14rem]')
+    })
+
     it('applies parent row focus-visible reveal classes', () => {
         render(
             <HoverTooltip
diff --git a/web/src/components/HoverTooltip.tsx b/web/src/components/HoverTooltip.tsx
index fbbecc62..e984030d 100644
--- a/web/src/components/HoverTooltip.tsx
+++ b/web/src/components/HoverTooltip.tsx
@@ -72,7 +72,7 @@ export function HoverTooltip(props: {
                 id={props.id}
                 className={cn(
                     'pointer-events-none absolute z-30 whitespace-normal',
-                    spansRow ? 'max-w-none' : 'max-w-[14rem]',
+                    spansRow ? 'max-w-none' : 'w-max max-w-[14rem]',
                     'rounded-md border border-[var(--app-border)] bg-[var(--app-secondary-bg)]',
                     'px-2 py-1 text-xs leading-snug text-[var(--app-fg)] shadow-lg',
                     side === 'top' ? 'bottom-full mb-1' : 'top-full mt-1',