klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-10 03:49:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Introduce position attributes for tooltips

Browse Source
This commit is contained in:
Antoine Bartuccio
2025-04-08 10:12:05 +02:00
parent 2e1a849aff
commit 5de05c0360
3 changed files with 38 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
core/static/core/style.scss
View File

@ -51,26 +51,51 @@ body {
[tooltip]::before {
@include shadow;
opacity: 0;
z-index: 1;
pointer-events: none;
content: attr(tooltip);
background: hsl(219.6, 20.8%, 96%);
color: $black-color;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
border: 0.5px solid hsl(0, 0%, 50%);
;
border-radius: 5px;
padding: 5px;
top: 1em;
padding: 5px 10px;
position: absolute;
margin-top: 5px;
white-space: nowrap;
opacity: 0;
transition: opacity 500ms ease-out;
top: 120%; // Put the tooltip under the element
}
[tooltip]:hover::before {
opacity: 1;
}
[position="top"][tooltip]::before {
top: initial;
bottom: 120%;
}
[position="bottom"][tooltip]::before {
top: 120%;
bottom: initial;
}
[position="left"][tooltip]::before {
top: initial;
bottom: 0%;
left: initial;
right: 65%;
}
[position="right"][tooltip]::before {
top: initial;
bottom: 0%;
left: 150%;
right: initial;
}
.ib {
display: inline-block;
padding: 1px;