search

pluginkollektiv / statify

Statify – statistics plugin for WordPress
https://wordpress.org/plugins/statify/
GNU General Public License v3.0
76 stars 22 forks source link

move invisible tooltip to the top left corner to prevent layout shift #277

Closed stklcode closed 5 months ago

stklcode commented 10 months ago

Describe the bug

The tooltip is placed at the bottom of the body which makes the page slightly longer, even though the user can't see the content. This might result in a layout shift when the tooltip is displayed for the first time and the scrollbar disappears.

To Reproduce

  1. Visit a site dashboard with the Statify widget enabled and some data present in the database.
  2. Keep an eye on the page layout and the scrollbar, if visible.
  3. Hover over any data point in the Statify chart (shows tooltip)
  4. See the layout and/or scrollbar shift.

statify-tooltip-shift

Expected behavior

Tooltip is displayed without additional layout shift.

Solution

Move the invisible tooltip element to the top-left corner fixes this issue. We use left/top CSS properties, because these two will be dynamically overwritten on mouse events anyway.

sonarcloud[bot] commented 5 months ago

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud