Companies' map: the Zoom in, Zoom out and Near me tooltips beside their button, towards the map #915

New issue

Closed

opened 2026-10-15 17:19:35 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-10-15 17:19:35 +00:00

Owner

On the companies' map, the tooltips of Zoom in, Zoom out and Near me appear beside their button, on the side facing into the map (to the left in a left-to-right page), not above or below it.

What exists today

Since #909 (36b4bc1da) the three buttons are stacked at the bottom of the end side. templates/jobs/company_map.html draws their sentences as <span id="map-tip-zoom-in|map-tip-zoom-out|map-tip-locate" data-tooltip>. app.js names each button by its sentence (nameByTip, aria-labelledby) and calls readyTooltips() again once Leaflet has drawn them.
The page's tooltips are placed by placeTip in static/js/app.js. It tries a fixed list of places: TIP_PLACES = ["above-start", "above-end", "above", "below-start", "below-end", "below"] (MARK_PLACES for question marks). There is no place beside the anchor, only above or below. The hover bridge in assets/css/app.css ([data-tooltip][popover][data-tooltip-side="above"|"below"]::after) also covers only those two sides.
So each map tooltip is drawn above or below its button. In a column of three stacked buttons, that lands over the neighbouring button.

What would change

placeTip learns two more places, start and end (logical: beside the anchor, vertically centred on it), with the same gap and the same rules for staying in the window and avoiding obstacles.
An anchor asks for a side with an attribute (for example data-tooltip-place="start" on the sentence or the button). The three map buttons ask for the side facing into the map: start while they are on the end side, flipping with dir as the buttons already do (endCorner).
The bridge (::after) gets an inline-side variant (data-tooltip-side="start"|"end": full height of the anchor, 8px wide), so the tooltip stays hoverable (SC 1.4.13).
If there is no room on that side, the tooltip falls back to the existing order.

Accessibility

Unchanged: shown on hover and on focus, dismissed with Escape, and the buttons stay named by the sentence.

No new strings.

Related: #909, #907, #850.

Checked against main at 56fc9d531.

On the companies' map, the tooltips of *Zoom in*, *Zoom out* and *Near me* appear beside their button, on the side facing into the map (to the left in a left-to-right page), not above or below it. ## What exists today - Since #909 (`36b4bc1da`) the three buttons are stacked at the bottom of the end side. `templates/jobs/company_map.html` draws their sentences as `<span id="map-tip-zoom-in|map-tip-zoom-out|map-tip-locate" data-tooltip>`. `app.js` names each button by its sentence (`nameByTip`, `aria-labelledby`) and calls `readyTooltips()` again once Leaflet has drawn them. - The page's tooltips are placed by `placeTip` in `static/js/app.js`. It tries a fixed list of places: `TIP_PLACES = ["above-start", "above-end", "above", "below-start", "below-end", "below"]` (`MARK_PLACES` for question marks). **There is no place beside the anchor, only above or below.** The hover bridge in `assets/css/app.css` (`[data-tooltip][popover][data-tooltip-side="above"|"below"]::after`) also covers only those two sides. - So each map tooltip is drawn above or below its button. In a column of three stacked buttons, that lands over the neighbouring button. ## What would change - `placeTip` learns two more places, `start` and `end` (logical: beside the anchor, vertically centred on it), with the same gap and the same rules for staying in the window and avoiding obstacles. - An anchor asks for a side with an attribute (for example `data-tooltip-place="start"` on the sentence or the button). The three map buttons ask for the side facing into the map: `start` while they are on the end side, flipping with `dir` as the buttons already do (`endCorner`). - The bridge (`::after`) gets an inline-side variant (`data-tooltip-side="start"|"end"`: full height of the anchor, 8px wide), so the tooltip stays hoverable (SC 1.4.13). - If there is no room on that side, the tooltip falls back to the existing order. ## Accessibility - Unchanged: shown on hover and on focus, dismissed with Escape, and the buttons stay named by the sentence. No new strings. Related: #909, #907, #850. Checked against `main` at `56fc9d531`.

tiagoagueda added the

accessibility

enhancement

interface

labels

2026-10-15 17:19:36 +00:00

tiagoagueda referenced this issue

2026-10-15 17:20:13 +00:00

Companies' map on phones: the Table button as its icon alone, with a "Table view" tooltip below it #916

tiagoagueda referenced this issue from a commit

2026-10-19 17:04:26 +00:00

Companies' map: tooltips beside their buttons, towards the map