[#68834] Fix Time Entry tooltips in My spent time

[myabc]

Ticket

https://community.openproject.org/wp/68834

What are you trying to accomplish?

Implements tooltips using a Primer-style Popover - a FIXME from the jQuery removal work.

Screenshots

What approach did you choose and why?

This (ab)uses Primer's tooltip - as it shows multiple lines of text (actually a list). Tooltips generally shouldn't contain this much information, but this was the quickest fix (and hopefully takes care of accessibility).

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[Copilot]

Pull Request Overview

This PR migrates the calendar tooltip implementation from the legacy jQuery UI tooltip to a modern tool-tip web component using Primer's design system. The changes include simplified CSS styling for tooltip content and a complete rewrite of the tooltip attachment/removal logic.

Key changes:

• Replaces jQuery tooltip with native tool-tip custom element
• Simplifies tooltip map styling by consolidating margin properties and adding text alignment
• Implements tooltip as a popover with proper ARIA attributes and positioning

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
frontend/src/global_styles/content/_tooltip.sass	Simplifies .tooltip--map styling by consolidating margins and adding left text alignment
frontend/src/app/features/calendar/te-calendar/te-calendar.component.ts	Replaces jQuery tooltip with custom tool-tip element, adds proper ID management and popover attributes

Comments suppressed due to low confidence (1)

frontend/src/app/features/calendar/te-calendar/te-calendar.component.ts:646

• The HTML string is missing the closing </ul> tag. This will result in malformed HTML when the tooltip is rendered.

        <ul class="tooltip--map">
          <li class="tooltip--map--item">
            <span class="tooltip--map--key">${schema.project.name}:</span>
            <span class="tooltip--map--value">${this.sanitizedValue(entry.project.name)}</span>
          </li>
          <li class="tooltip--map--item">
            <span class="tooltip--map--key">${schema.entity.name}:</span>
            <span class="tooltip--map--value">${entry.entity ? this.sanitizedValue(this.entityName(entry)) : this.i18n.t('js.placeholders.default')}</span>
          </li>
          <li class="tooltip--map--item">
            <span class="tooltip--map--key">${schema.activity.name}:</span>
            <span class="tooltip--map--value">${this.sanitizedValue(entry.activity?.name || '')}</span>
          </li>
          <li class="tooltip--map--item">
            <span class="tooltip--map--key">${schema.hours.name}:</span>
            <span class="tooltip--map--value">${this.timezone.formattedDuration(entry.hours as string)}</span>
          </li>
          <li class="tooltip--map--item">
            <span class="tooltip--map--key">${schema.comment.name}:</span>
            <span class="tooltip--map--value">${this.sanitizedValue(entry.comment.raw || this.i18n.t('js.placeholders.default'))}</span>
          </li>
        `;

[myabc]

@HDinger I think we can probably delete some of the styles in src/global_styles/content/_tooltip.sass as we're no longer using jQuery UI tooltip (AFAICT Backlogs doesn't use it)

[mrmir]

For the bug we discussed already regarding the tooltip not moving with the cursor

[Copilot]

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

[mrmir]

Looks fine as a popover, but the tracking/following behaviour needs to be figured out