# Feature DREAM-950 - Use Primer tooltips instead of `title` on Angular buttons and links

Project: Stream Design System
Status: tested
URL: https://community.openproject.org/work_packages/DREAM-950

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.0.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List | a11y report 2026 |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Accessibility, Frontend components and Primer design system |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan | Community (COM) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | Yes |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Alexander Coles |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

## Context

Many buttons and links in OpenProject show their hint with the browser's native tooltip. That tooltip only appears on mouse hover, never on keyboard focus or touch, and screen readers announce it inconsistently. Icon-only buttons depend on it for their name. <mention class="mention" data-id="OP-20564" data-type="work_package" data-text="#OP-20564">#OP-20564</mention> moved the BIM toolbar and the time entry actions to [Primer tooltips](https://primer.style/product/components/tooltip/) and set the pattern for the rest.

## Goal

Buttons and links show their hints as [Primer tooltips](https://primer.style/product/components/tooltip/), following the rules of Primer's buttons and icon buttons:

  - Icon-only controls: a tooltip with the control's name.

  - Controls with visible text: no tooltip, as their text already names them. A tooltip only when it adds something not visible, such as why the control cannot be used.

  - Controls whose text is hidden on narrow screens or cut off (toolbar buttons on small screens, long breadcrumbs): a tooltip with the full text, only while the text is not fully visible.

Tooltips then appear on keyboard focus as well as on hover, and only where they add information.

This should align the behaviour of legacy Angular-rendered buttons and links with their Primer View Component-rendered counterparts.

## Acceptance criteria

  - Icon-only buttons and links show their name as a tooltip, both on mouse hover and when focused with **Tab**.

  - Buttons and links with visible text show no tooltip, unless it adds information that is not on screen (for example why the control cannot be used, or the description of a custom action).

  - Buttons whose text is hidden on narrow screens or cut off show the full text as a tooltip only while it is hidden or cut off. Once the text is fully visible, focusing or hovering shows no tooltip.

  - A tooltip closes when the pointer or focus leaves the control, and on **Escape**.

  - Screen readers announce icon-only controls by their tooltip text, and controls with visible text by that text, with any tooltip as an extra description. A control is announced with the same name at every screen width.

  - Controls that cannot be used at the moment but explain why stay focusable and hoverable, look disabled, and do nothing when activated. Examples: Gantt **Zoom in**/**Zoom out** at the zoom limit, a status that cannot be changed.

  - The buttons on a card (open details, remove from list) appear when the card has keyboard focus, as they do on hover.

  - None of the controls listed under Hints for QA show the browser's native tooltip any more.

  - Apart from the tooltip, the controls look and behave as before.

## Hints for QA

*Automated tests cover many of the cases below. If time permits, here is a comprehensive list of controls to check. If time is short, then a spot check of a couple controls on each page should suffice.*

**How to test:** hover each control, then reach it with **Tab** and check the tooltip opens, then press **Escape**. "Narrow" means a browser window 767 px wide or less. Known Primer limitation: an open tooltip does not move with its control when the page scrolls or resizes.

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Narrow</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Wide</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/926654/content" alt="Filter button on a narrow screen with its &quot;Activate Filter&quot; tooltip"><br>Text hidden when narrow = tooltip.</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/926653/content" alt="Filter button focused on a wide screen without a tooltip"><br>Visible text = no tooltip.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/926655/content" alt="Create button on a narrow screen with its &quot;Create new work package&quot; tooltip"><br>Text hidden when narrow = tooltip.</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/926656/content" alt="Details view icon button with its &quot;Open details view&quot; tooltip"><br>Icon = tooltip.</p></td></tr></tbody></table></figure>

- [x] Work packages list
  - [x] Toolbar, narrow screens only: **Create** ("Create new work package"), **Filter** ("Activate Filter" / "Deactivate Filter"), **Include projects** ("Include projects", with the count when projects are included), **Baseline**. On wide screens these show no tooltip.
  - [x] Toolbar, always: details view ("Open details view" / "Close details view"), zen mode ("Activate zen mode" / "Deactivate zen mode"), more actions ("More actions"), unsaved-view save icon next to the title ("This view has unsaved changes. Click to save them.").
  - [x] Without permission to add work packages, **Create** looks disabled, stays focusable and does not open its menu.
  - [x] Gantt toolbar: **Auto zoom**, **Zoom in**, **Zoom out**. At the zoom limit **Zoom in**/**Zoom out** look disabled but still show their tooltip.
  - [x] View mode menu (Cards / Table / Gantt): each item describes itself ("Show card view", "Show table view", "Show Gantt view").
  - [x] Filter panel: remove filter ("Delete"), close panel ("Close form"), clear a date-range value ("Clear").
  - [x] Table header: settings gear ("Configure view", mouse only).
  - [x] Enterprise relation columns (add under **Configure view** › **Columns**): the column header shows the full column name as a tooltip, e.g. "Relations to Bug" on a header reading "Bug".
- [x] Work package full view, split view and create page
  - [x] Toolbar: **Share** ("Share", with the count when shared), reminder ("Set reminder"), watch ("Watch work package" / "Unwatch work package"), mark as read ("Mark as read", only with unread notifications), zen mode, more ("More"), create page settings ("Settings").
  - [x] Timer: "Start new timer"; while running, the elapsed time shows with "Stop current timer".
  - [x] Status button: tooltip only when the status name is cut off.
  - [x] Locked status: always describes why ("Work package is locked in this status. No attribute other than status can be altered."), on the button and in the status menu.
  - [x] Status that cannot be changed because of a closed version: looks disabled, explains why, and does not open its menu.
  - [x] Parent: "Change parent" (pencil) and "Remove parent" (✕). The parent name and **Set parent** show no tooltip.
  - [x] Ancestor breadcrumb (work package with two or more ancestors): an ancestor name shows as a tooltip only when it is cut off.
  - [x] Author link in the "created by" line: no tooltip, the user hover card stays.
  - [x] Custom actions (Enterprise): a tooltip only for actions with a description.
  - [x] Inline editing of long text, multi-select and version fields: save and cancel ("Description: Save", "Description: Cancel").
  - [x] Watchers tab: remove ("Remove watcher" followed by the watcher's name).
  - [x] Files tab: delete attachment ("Delete" followed by the file name), open storage ("Open Nextcloud").
  - [x] Files tab, file link rows (on hover, not on mobile): "Open file on storage", "Open file in location", "Download" followed by the file name, "Remove file link".
  - [x] File picker dialogs: a folder name in the breadcrumb shows as a tooltip only when it is cut off or hidden on a narrow screen.
  - [x] Embedded related or child work package tables: **Add existing**, then cancel ("Abort"). Setup (Enterprise): an admin adds a table of related work packages to the type under **Administration** › **Work packages** › **Types** › type › **Form configuration**.
- [x] Cards (boards, work package card view, team planner)
  - [x] Card buttons: "Open details view" and "Remove card from list" (manual boards). They also appear on keyboard focus.
  - [x] Activating a disabled control inside a card (for example a status that cannot be changed) does not open or select the card.
- [x] Boards
  - [x] Add card ("Add card"), board toolbar more ("More").
  - [x] **Add list** dialog buttons show no tooltip.
- [x] Team planner
  - [x] **Add existing** describes itself ("Add existing work packages").
  - [x] The view selector (e.g. **Work week**) shows no tooltip.
- [x] Other screens
  - [ ] Notification center: the work package ID link (e.g. "\#1234") shows the work package subject. *(N.B. while this does replicate existing behaviour, it was flagged as being potentially unncessary by <mention class="mention" data-id="100304" data-type="user" data-text="@Lars Wassermann">@Lars Wassermann</mention> in code review. Should ideally be double checked by UX/UI team).*
  - [x] Header search: search button ("Search", mouse only) and, on mobile, back ("Close search").
  - [x] Toast messages: close ("Close popup").
  - [x] "Spent time (last 7 days)" widget on a project's **Overview** › **Dashboard** tab (add it with **+ Widget**, needs the "Manage dashboards" permission and time entries in the last 7 days): row actions "Edit" and "Delete", now reachable and usable by keyboard.
  - [x] Include wiki page dialog (editor macro): **Cancel** and **Save** show no tooltip.
- [x] BIM
  - [x] Viewer overlay icon when the viewer has no keyboard control ("Viewer does not have keyboard controls. Click on the viewer to give keyboard control to the viewer."), now reachable with **Tab** and **Enter**.
  - [x] BCF toolbar import, export and refresh look as before.
  - [x] **Viewpoint** button ("Add viewpoint") in the BCF section of a work package opened next to the IFC viewer. Needs a project with an IFC model and the "Import and manage BCF issues" permission.

### Out of scope

  - <mention class="mention" data-id="DREAM-955" data-type="work_package" data-text="#DREAM-955">#DREAM-955</mention>: action icons and values inside work package table rows.

  - <mention class="mention" data-id="DREAM-956" data-type="work_package" data-text="#DREAM-956">#DREAM-956</mention>: non-working days list, attribute help texts, board hidden-list warning.