tooltips showing above instead of right for browse properties #102

New issue

Closed

opened 2026-05-10 15:22:01 +00:00 by maxtkc · 0 comments

maxtkc commented

2026-05-10 15:22:01 +00:00

Owner

Summary

Tailwind v4 statically scans source files for complete class name strings to decide which CSS to emit. The Fares phase refactored renderFieldLabelContent to accept a tooltipDirection parameter and emit tooltip-${tooltipDirection} via template interpolation. The scanner cannot resolve template expressions at build time, so tooltip-right (and the other direction classes) are never included in the CSS bundle. Without tooltip-right in the stylesheet, DaisyUI falls back to its default direction (top/above). The fix is to replace the interpolation with a lookup object whose values are full literal class name strings, so the scanner can see all four options unconditionally.

The default direction remains 'right'. Callers that need a different direction (e.g. fares-modal.ts passes 'bottom' for table column headers) continue to work unchanged.

Relevant context

src/utils/field-component.ts — renderFieldLabelContent (~line 178–194). The broken line:
```
return `...`;
```
src/modules/fares-modal.ts — calls renderFieldLabelContent(config, 'bottom') (line 79) for table column headers. Direction should stay 'bottom'; no change needed there.
src/modules/timetable-renderer.ts — calls renderFieldLabelContent(config) (line 244) with no direction; relies on the default ('right').
renderLabel in field-component.ts (~line 199) — calls renderFieldLabelContent(config) with no direction; used for Feed Information form labels. This is the regression site (tooltips appear above on fresh builds).

Phase 1 — Fix the class name interpolation

Goal: Replace the template-literal class interpolation with a lookup object so all four tooltip-* class names appear as string literals in the source. Tailwind's scanner will then include them in the CSS bundle unconditionally.

In renderFieldLabelContent (field-component.ts ~line 191), replace:

return `<span class="tooltip tooltip-${tooltipDirection}" data-tip="${escapeAttr(tipContent)}">${linkContent}${presenceMark}</span>`;

with:

const directionClass: Record<'top' | 'bottom' | 'left' | 'right', string> = {
  top: 'tooltip-top',
  bottom: 'tooltip-bottom',
  left: 'tooltip-left',
  right: 'tooltip-right',
};
return `<span class="tooltip ${directionClass[tooltipDirection]}" data-tip="${escapeAttr(tipContent)}">${linkContent}${presenceMark}</span>`;

Verify the default parameter ('right') and the fares-modal.ts call ('bottom') remain unchanged — no other callers need updating.

## Summary Tailwind v4 statically scans source files for complete class name strings to decide which CSS to emit. The Fares phase refactored `renderFieldLabelContent` to accept a `tooltipDirection` parameter and emit `tooltip-${tooltipDirection}` via template interpolation. The scanner cannot resolve template expressions at build time, so `tooltip-right` (and the other direction classes) are never included in the CSS bundle. Without `tooltip-right` in the stylesheet, DaisyUI falls back to its default direction (top/above). The fix is to replace the interpolation with a lookup object whose values are full literal class name strings, so the scanner can see all four options unconditionally. The default direction remains `'right'`. Callers that need a different direction (e.g. `fares-modal.ts` passes `'bottom'` for table column headers) continue to work unchanged. ## Relevant context - **`src/utils/field-component.ts`** — `renderFieldLabelContent` (~line 178–194). The broken line: ```ts return `...`; ``` - **`src/modules/fares-modal.ts`** — calls `renderFieldLabelContent(config, 'bottom')` (line 79) for table column headers. Direction should stay `'bottom'`; no change needed there. - **`src/modules/timetable-renderer.ts`** — calls `renderFieldLabelContent(config)` (line 244) with no direction; relies on the default (`'right'`). - **`renderLabel`** in `field-component.ts` (~line 199) — calls `renderFieldLabelContent(config)` with no direction; used for Feed Information form labels. This is the regression site (tooltips appear above on fresh builds). ## Phase 1 — Fix the class name interpolation **Goal:** Replace the template-literal class interpolation with a lookup object so all four `tooltip-*` class names appear as string literals in the source. Tailwind's scanner will then include them in the CSS bundle unconditionally. - [x] In `renderFieldLabelContent` (field-component.ts ~line 191), replace: ```ts return `${linkContent}${presenceMark}`; ``` with: ```ts const directionClass: Record<'top' | 'bottom' | 'left' | 'right', string> = { top: 'tooltip-top', bottom: 'tooltip-bottom', left: 'tooltip-left', right: 'tooltip-right', }; return `${linkContent}${presenceMark}`; ``` - [x] Verify the default parameter (`'right'`) and the `fares-modal.ts` call (`'bottom'`) remain unchanged — no other callers need updating.