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

Add doc, tooltip offset and css cleanup

Browse Source
This commit is contained in:
Antoine Bartuccio 2025-04-28 14:31:56 +02:00
parent 997259242e
commit 86eb3923df
2 changed files with 10 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
core/static/bundled/core/tooltips-index.ts
View File

@ -1,7 +1,8 @@
import { type Placement, computePosition } from "@floating-ui/dom"; import { type Placement, computePosition, offset } from "@floating-ui/dom";
/** /**
* Library usage: * Library usage:
*
* Add a `tooltip` attribute to any html element with it's tooltip text * Add a `tooltip` attribute to any html element with it's tooltip text
* You can control the position of the tooltp with the `tooltip-position` attribute * You can control the position of the tooltp with the `tooltip-position` attribute
* Allowed placements are `top`, `right`, `bottom`, `left` * Allowed placements are `top`, `right`, `bottom`, `left`
@ -10,6 +11,13 @@ import { type Placement, computePosition } from "@floating-ui/dom";
* You can customize your tooltip by passing additionnal classes or ids to it * You can customize your tooltip by passing additionnal classes or ids to it
* You can use `tooltip-class` and `tooltip-id` to add additional elements to the * You can use `tooltip-class` and `tooltip-id` to add additional elements to the
* `class` and `id` attribute of the generated tooltip * `class` and `id` attribute of the generated tooltip
*
* @example
* ```html
* <p tooltip="tooltip text"></p>
* <p tooltip="tooltip left" tooltip-position="left"></p>
* <div tooltip="tooltip custom class" tooltip-class="custom custom-class"></div>
* ```
**/ **/
type Status = "open" | "close"; type Status = "open" | "close";
@ -68,6 +76,7 @@ addEventListener("mouseover", (event: MouseEvent) => {
computePosition(target, tooltip, { computePosition(target, tooltip, {
placement: getPlacement(target), placement: getPlacement(target),
middleware: [offset(6)],
}).then(({ x, y }) => { }).then(({ x, y }) => {
Object.assign(tooltip.style, { Object.assign(tooltip.style, {
left: `${x}px`, left: `${x}px`,

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

@ -45,35 +45,6 @@ body {
} }
} }
@mixin tooltip {
@include shadow;
z-index: 1;
pointer-events: none;
background-color: #333;
color: #fff;
border: 0.5px solid hsl(0, 0%, 50%);
border-radius: 5px;
padding: 5px 10px;
position: absolute;
white-space: nowrap;
opacity: 0;
transition: opacity 500ms ease-in;
}
.tooltip {
@include tooltip;
position: absolute;
width: max-content;
left: 0;
top: 0;
}
.tooltip[tooltip-status=open] {
opacity: 1;
transition: opacity 500ms ease-in;
}
.ib { .ib {
display: inline-block; display: inline-block;
padding: 1px; padding: 1px;