klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-04-16 02:50:22 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
com/static/bundled/com/components/ics-calendar-index.ts
View File

@ -310,9 +310,10 @@ export class IcsCalendar extends inheritHtmlElement("div") {
const button = event.target as HTMLButtonElement; const button = event.target as HTMLButtonElement;
button.classList.add("text-copy"); button.classList.add("text-copy");
button.setAttribute( button.setAttribute(
"data-tooltip", "tooltip",
gettext("Calendar link copied to the clipboard"), gettext("Calendar link copied to the clipboard"),
); );
button.setAttribute("position", "top");
navigator.clipboard.writeText( navigator.clipboard.writeText(
new URL( new URL(
await makeUrl(calendarCalendarInternal), await makeUrl(calendarCalendarInternal),
@ -323,7 +324,8 @@ export class IcsCalendar extends inheritHtmlElement("div") {
button.classList.remove("text-copied"); button.classList.remove("text-copied");
button.classList.add("text-copied"); button.classList.add("text-copied");
button.classList.remove("text-copy"); button.classList.remove("text-copy");
button.removeAttribute("data-tooltip"); button.removeAttribute("tooltip");
button.removeAttribute("position");
}, 700); }, 700);
}, },
}, },

33
com/static/com/components/ics-calendar.scss
View File

@ -22,8 +22,6 @@
ics-calendar { ics-calendar {
border: none; border: none;
box-shadow: none; box-shadow: none;
overflow: visible;
z-index: 1;
#event-details { #event-details {
z-index: 10; z-index: 10;
@ -118,34 +116,7 @@ ics-calendar {
transition: 200ms linear; transition: 200ms linear;
} }
[tooltip]::before {
font-size: 10px; // this will overflow otherwise
/* Tooltip styles */
button[data-tooltip] {
position: relative;
cursor: pointer;
}
button[data-tooltip]::after {
font-size: 10px;
content: attr(data-tooltip);
position: absolute;
bottom: 120%; /* Adjust this value to position the tooltip above the button */
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
z-index: 99999;
}
button[data-tooltip]:hover::after,
button[data-tooltip]:focus::after {
opacity: 1;
} }
} }

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

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