# Position de la fenêtre d'informations des graphiques

**URL:** <https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553>\
**Category:** Demandes livrées\
**Tags:** feature-core, in-progress\
**Created:** [Juin 2, 2025, 4:59 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553 "2025-06-02T16:59:57Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Août 14, 2026, 9:28 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/10 "2026-08-14T09:28:21Z")

</div>

Salut @Jluc,

C’est corrigé :

 ![Capture d’écran 2026-08-14 à 11.27.21](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/a/7/a7f8f509b48b40c8d2869bad0ba89d838c8426d2.png)

La PR :

> <https://github.com/GladysAssistant/Gladys/pull/2866>
>
> \### Description
> 
> On dashboard charts, the tooltip was pinned to the top-left of …the chart (\`fixed: { position: 'topLeft' }\`), so it permanently covered the curves while hovering — especially with several series (e.g. multiple temperature sensors), where the tooltip is tall enough to hide most of the chart.
> 
> \*\*What this PR does:\*\*
> 
> 1. Removes the fixed tooltip positioning (\`ApexChartComponent.jsx\` for line/area/stepline/bar/energy consumption charts, \`ApexChartTimelineOptions.js\` for the timeline chart) and enables \`followCursor\`.
> 2. Keeps the tooltip \*\*30px away from the cursor\*\* (new \`apexChartTooltipPositioning.js\` module), preferring the bottom-right of the cursor and flipping to the other side near the chart edges — plain \`followCursor\` was not enough, the tooltip stuck to the pointer and still covered the curve under it.
> 3. Caps the tooltip width at \`min(320px, 80vw)\` and lets long device names wrap (\`style/index.css\`), so a device like \`Capteur température terrasse (Température) (°C)\` no longer stretches the tooltip across the whole chart.
> 
> \*\*Why a MutationObserver:\*\* ApexCharts repositions its tooltip from several code paths — synchronously in its own mousemove listeners, but also from a ~100ms throttle timer (\`seriesHoverTimeout\`) that fires \*after\* the cursor stops moving. Positioning only from \`chart.events.mouseMove\` therefore always ends up overridden (this is the race that blocked the previous attempt in #2613). A MutationObserver on the tooltip element re-applies our position whenever ApexCharts moves it, as a microtask before the frame is painted: no flicker, and the native positioning can never win once the cursor stops.
> 
> \*\*Verified with Playwright\*\* against the real ApexCharts build (line chart with axes + sparkline box, 3 long-named series): 30px gap maintained at chart center, edges, and after a fast sweep followed by a dead stop (the throttled ApexCharts redraw no longer wins the race).
> 
> \## Forum
> 
> Forum: https://community.gladysassistant.com/t/affichage-temperatures/10417
> 
> \### Checklist
> 
> \- \[x\] Tests pass: front-only change, no server code touched; behavior verified with Playwright against the bundled ApexCharts build
> \- \[x\] Linter and prettier pass on both front and server (\`npm run eslint\`, \`npm run prettier-check\` on front — 0 errors)
> \- \[x\] No undocumented breaking change
> 
> 
> \## Summary by CodeRabbit
> 
> \* \*\*Bug Fixes\*\*
> \* Updated chart tooltips to follow the cursor for more intuitive positioning.
> \* Removed fixed top-left tooltip placement across standard and timeline charts.
> \* Improved tooltip behavior near chart edges and on touch devices.
> \* Ensured tooltip positioning remains consistent as chart content updates.
> 
> \* \*\*Style\*\*
> \* Limited tooltip width and enabled long device names to wrap for improved readability.

Merci pour ton retour et désolé pour le délai 🙌  
On aurait dû le traiter bien avant ! Maintenant, avec Claude c’est beaucoup plus rapide ce genre de correctifs.

---

_[View the full topic](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553)._