[James Newton-King (JamesNK)]

Description

Long dashboard tooltips can be unnecessarily narrow compared with native browser tooltips. This change allows plain-text tooltips to use more of the available space, wrap long words, and truncate very long text consistently. Rich tooltips remain unchanged.

User-facing usage

Hover a dashboard element with a long text tooltip to see it wrap within the available viewport. Text exceeding 1,024 UTF-16 units is shortened at a word boundary where possible and ends with an ellipsis.

Screenshots

The comparison page shows the original and updated Fluent tooltip rules for the same text:

Before	After

An unbroken 10,000-character value wraps and is truncated:

Validation

• Passed the focused Playwright scenario (1 test) with the following command, before the final CSS width simplification:

  $env:BROWSER_PATH = "C:\Program Files\Google\Chrome\Application\chrome.exe"
  dotnet test --project tests/Aspire.Dashboard.Playwright.Tests/Aspire.Dashboard.Playwright.Tests.csproj --no-launch-profile /p:InstallBrowsersForPlaywright=false -- --filter-method "*.Tooltips_TruncateLongPlainTextAndPreserveRichContent" --filter-not-trait "quarantined=true"

• On the final CSS, the local comparison page passed 24 wrapping and placement checks at 360px. Its 800px iframe run timed out waiting for a tooltip on the 10,000-character case, so the 1440px checks were not reached.

• Directly hovering the 10,000-character case in the comparison page displayed 1,024 characters including an ellipsis, at an 800px tooltip width within a 1096px viewport.

Fixes # (issue)

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
  • No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
  • No
• Did you add public API?
  • Yes
    • If yes, did you have an API Review for it?
      • Yes
      • No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • Yes
      • No
  • No
• Does the change make any security assumptions or guarantees?
  • Yes
    • If yes, have you done a threat model and had a security review?
      • Yes
      • No
  • No

[github-actions]

🚀 Dogfood this PR with:

⚠️ WARNING: Do not do this without first carefully reviewing the code of this PR to satisfy yourself it is safe.

curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 22235

Or

• Run remotely in PowerShell:

iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 22235"

[github-actions]

Tests selector

13 / 101 PR test projects · 2 PR jobs, from 3 changed files.

Selected PR test projects (13 / 101)

Aspire.Dashboard.Components.Tests, Aspire.Dashboard.Tests, Aspire.Hosting.Azure.Kubernetes.Tests, Aspire.Hosting.Azure.Tests, Aspire.Hosting.Blazor.Tests, Aspire.Hosting.Dotnet.Tests, Aspire.Hosting.DotnetTool.Tests, Aspire.Hosting.JavaScript.Tests, Aspire.Hosting.Radius.Tests, Aspire.Hosting.Testing.Tests, Aspire.Hosting.Tests, Aspire.Playground.Tests, Aspire.Templates.Tests

Selected PR jobs (2)

extension-e2e, native-dashboard-validation

---

How these were chosen — grouped by what changed

⚠️ 12 of the 13 selected test projects come from a single change — src/Aspire.Dashboard/wwwroot/css/controls.css.

🔧 src/Aspire.Dashboard/wwwroot/css/controls.css (changed source)
→ 12 via the project graph: Aspire.Dashboard.Components.Tests, Aspire.Dashboard.Tests, Aspire.Hosting.Azure.Kubernetes.Tests (3 hops), Aspire.Hosting.Azure.Tests (2 hops), Aspire.Hosting.Blazor.Tests (2 hops), Aspire.Hosting.Dotnet.Tests (2 hops), Aspire.Hosting.DotnetTool.Tests (2 hops), Aspire.Hosting.JavaScript.Tests, Aspire.Hosting.Radius.Tests (2 hops), Aspire.Hosting.Testing.Tests, Aspire.Hosting.Tests, Aspire.Playground.Tests (2 hops)

📦 affected project Aspire.Dashboard
→ 1 test: Aspire.Templates.Tests

Job reasons

Job	Triggered by
extension-e2e	• src/Aspire.Dashboard/wwwroot/css/controls.css, src/Aspire.Dashboard/wwwroot/js/app-tooltips.js • affected project Aspire.Dashboard
native-dashboard-validation	affected project Aspire.Dashboard

---

Selection computed for commit 86c4040.

[Copilot]

🟡 Changes recommended

The trailing trim removes combining accents from complete retained words, changing text such as “café” to “cafe” even when truncation occurs at a word boundary.

1 open issue

• Preserve combining marks when truncating at word boundaries · New

What changed in this PR

Improves long plain-text tooltips in the Aspire dashboard while preserving rich tooltip content.

Changes:

• Adjusts tooltip width limits to use available space and wrap long text.
• Caps plain-text tooltips at 1,024 UTF-16 units, preferring word boundaries and adding an ellipsis.
• Adds Playwright coverage for truncation boundaries, surrogate handling, and rich-content preservation.

File	Description
tests/​Aspire.Dashboard.Playwright.Tests/​Integration/​Playwright/​ResourcesTests.cs	Adds plain-text truncation and rich-tooltip preservation tests.
src/​Aspire.Dashboard/​wwwroot/​js/​app-tooltips.js	Implements length-limited, word-aware plain-text truncation.
src/​Aspire.Dashboard/​wwwroot/​css/​controls.css	Updates tooltip width limits for viewport and anchor space.

_{Review effort: Balanced}