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

Implements tooltips using Primer's `tool-tip` custom element.

Author: myabc

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

@@ -55,6 +55,7 @@ import { DayResourceService } from 'core-app/core/state/days/day.service';
 import allLocales from '@fullcalendar/core/locales-all';
 import { TurboRequestsService } from 'core-app/core/turbo/turbo-requests.service';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
+import { ensureId } from 'core-app/shared/helpers/dom-helpers';
 
 interface TimeEntrySchema extends SchemaResource {
   activity:IFieldSchema;
@@ -534,23 +535,28 @@ export class TimeEntryCalendarComponent implements AfterViewInit, OnDestroy {
 
     const schema = (await this.schemaCache.ensureLoaded(entry as TimeEntryResource)) as TimeEntrySchema;
 
+    const forEl = event.el;
+    const forId = ensureId(forEl);
+
     const tooltip = document.createElement('tool-tip');
-    tooltip.textContent = this.tooltipContentString(event.event.extendedProps.entry as TimeEntryResource, schema);
-    event.el.appendChild(tooltip);
+    tooltip.innerHTML = this.tooltipContentString(event.event.extendedProps.entry as TimeEntryResource, schema);
+    ensureId(tooltip, 'tooltip');
+    tooltip.setAttribute('for', forId);
+    tooltip.setAttribute('popover', 'manual');
+    tooltip.setAttribute('data-direction', 'sw');
+    tooltip.setAttribute('data-type', 'label');
+    tooltip.classList.add('position-absolute');
 
-    // TODO: port tooltips
-    // jQuery(event.el).tooltip({
-    //   content: this.tooltipContentString(event.event.extendedProps.entry as TimeEntryResource, schema),
-    //   items: '.fc-event',
-    //   close() {
-    //     document.querySelectorAll('.ui-helper-hidden-accessible').forEach(element => element.remove());
-    //   },
-    //   track: true,
-    // });
+    event.el.appendChild(tooltip);
   }
 
   private removeTooltip(event:CalendarViewEvent):void {
-    // TODO: port tooltips
+    const forId = event.el.id;
+    if (!forId) {
+      return;
+    }
+
+    document.querySelector(`tool-tip[for="${forId}"]`)?.remove();
   }
 
   private prependDuration(event:CalendarViewEvent):void {

frontend/src/global_styles/content/_tooltip.sass

@@ -38,14 +38,9 @@
   opacity: 1
 
 .tooltip--map
-  margin-top: 1em
-  margin-bottom: 0
+  margin: 0
   list-style: none
-  margin-left: 0
-  font-size: 13.6px
-
-  &:first-child
-    margin-top: 0
+  text-align: left
 
 .tooltip--map--key
   font-weight: var(--base-text-weight-bold)