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

Create basic tooltip library

Browse Source
This commit is contained in:
Antoine Bartuccio
2025-04-25 15:35:39 +02:00
parent 5e953d04fe
commit 35e96fb875
5 changed files with 99 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,17 +45,10 @@ body {
}
}
[tooltip] {
position: relative;
}
[tooltip]::before {
.tooltip {
@include shadow;
z-index: 1;
pointer-events: none;
content: attr(tooltip);
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
border: 0.5px solid hsl(0, 0%, 50%);
@ -64,44 +57,20 @@ body {
position: absolute;
white-space: nowrap;
opacity: 0;
transition: opacity 500ms ease-out;
top: 120%; // Put the tooltip under the element
transition: opacity 500ms ease-in;
position: absolute;
width: max-content;
left: 0;
top: 0;
}
[tooltip]:hover::before {
.tooltip[tooltip-status=open] {
opacity: 1;
transition: opacity 500ms ease-in;
}
[no-hover][tooltip]::before {
opacity: 1;
transition: opacity 500ms ease-in;
}
[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;