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

modification du style du tooltip

Browse Source
This commit is contained in:
Kenneth SOARES 2025-04-07 19:15:16 +02:00
parent b09d5e5ffd
commit 2e1a849aff
2 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -22,6 +22,8 @@
ics-calendar {
border: none;
box-shadow: none;
overflow: visible;
z-index: 1;
#event-details {
z-index: 10;
@ -106,7 +108,7 @@ ics-calendar {
button.text-copy,
button.text-copy:focus,
button.text-copy:hover {
background-color: green !important;
background-color: #67AE6E !important;
transition: 200ms linear;
}
@ -115,4 +117,35 @@ ics-calendar {
button.text-copied:hover {
transition: 200ms linear;
}
/* 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;
}
}