mirror of
https://github.com/ae-utbm/sith.git
synced 2025-05-04 16:44:07 +00:00
Add doc, tooltip offset and css cleanup
This commit is contained in:
parent
997259242e
commit
86eb3923df
@ -1,7 +1,8 @@
|
||||
import { type Placement, computePosition } from "@floating-ui/dom";
|
||||
import { type Placement, computePosition, offset } from "@floating-ui/dom";
|
||||
|
||||
/**
|
||||
* Library usage:
|
||||
*
|
||||
* 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
|
||||
* 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 use `tooltip-class` and `tooltip-id` to add additional elements to the
|
||||
* `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";
|
||||
@ -68,6 +76,7 @@ addEventListener("mouseover", (event: MouseEvent) => {
|
||||
|
||||
computePosition(target, tooltip, {
|
||||
placement: getPlacement(target),
|
||||
middleware: [offset(6)],
|
||||
}).then(({ x, y }) => {
|
||||
Object.assign(tooltip.style, {
|
||||
left: `${x}px`,
|
||||
|
@ -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 {
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user