Skip to content

Commit

Permalink
move invisible tooltip to the top left corner to prevent layout shift
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 Nov 12, 2023
1 parent 77a8873 commit d49342c
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 d49342c

Please sign in to comment.