Skip to content

Commit

Permalink
move invisible tooltip to top left corner to prevent layout shift (#277)
Browse files Browse the repository at this point in the history
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.

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.
  • Loading branch information
stklcode committed Apr 5, 2024
1 parent 52ffec2 commit e127700
Showing 1 changed file with 2 additions and 0 deletions.
2 changes: 2 additions & 0 deletions css/dashboard.css
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ body.rtl #statify_chart * {
border: 1px solid #000;
background-color: #fff;
border-radius: 0.2em;
left: 0;
padding: 0.1em 0.5em;
top: 0;
}

.statify-chartist-tooltip::before {
Expand Down

0 comments on commit e127700

Please sign in to comment.