Create basic tooltip library

This commit is contained in:
Antoine Bartuccio 2025-04-25 15:35:39 +02:00
parent 73e9c3132b
commit 273944f2a7
5 changed files with 99 additions and 40 deletions

View File

@ -0,0 +1,62 @@
import { type Placement, computePosition } 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 `position` attribute
* Allowed placements are `top`, `right`, `bottom`, `left`
* You can add `-start` and `-end` to all allowed placement values
**/
function getPlacement(element: HTMLElement): Placement {
const position = element.getAttribute("position");
if (position) {
return position as Placement;
}
return "bottom";
}
function getTooltip(element: HTMLElement) {
for (const tooltip of document.body.getElementsByClassName("tooltip")) {
if (tooltip.textContent === element.getAttribute("tooltip")) {
return tooltip as HTMLElement;
}
}
const tooltip = document.createElement("div");
document.body.append(tooltip);
tooltip.classList.add("tooltip");
tooltip.innerText = element.getAttribute("tooltip");
return tooltip;
}
addEventListener("mouseover", (event: MouseEvent) => {
const target = event.target as HTMLElement;
if (!target.hasAttribute("tooltip")) {
return;
}
const tooltip = getTooltip(target);
tooltip.setAttribute("tooltip-status", "open");
computePosition(target, tooltip, {
placement: getPlacement(target),
}).then(({ x, y }) => {
Object.assign(tooltip.style, {
left: `${x}px`,
top: `${y}px`,
});
});
document.body.append(tooltip);
});
addEventListener("mouseout", (event: MouseEvent) => {
const target = event.target as HTMLElement;
if (!target.hasAttribute("tooltip")) {
return;
}
getTooltip(target).setAttribute("tooltip-status", "close");
});

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;

View File

@ -24,6 +24,7 @@
<script type="module" src="{{ static('bundled/alpine-index.js') }}"></script>
<script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
<script type="module" src="{{ static('bundled/country-flags-index.ts') }}"></script>
<script type="module" src="{{ static('bundled/core/tooltips-index.ts') }}"></script>
<!-- Jquery declared here to be accessible in every django widgets -->
<script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>

26
package-lock.json generated
View File

@ -11,6 +11,7 @@
"dependencies": {
"@alpinejs/sort": "^3.14.7",
"@arendjr/text-clipper": "npm:@jsr/arendjr__text-clipper@^3.0.0",
"@floating-ui/dom": "^1.6.13",
"@fortawesome/fontawesome-free": "^6.6.0",
"@fullcalendar/core": "^6.1.15",
"@fullcalendar/daygrid": "^6.1.15",
@ -2162,6 +2163,31 @@
"node": ">=18"
}
},
"node_modules/@floating-ui/core": {
"version": "1.6.9",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
"integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
"license": "MIT",
"dependencies": {
"@floating-ui/utils": "^0.2.9"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.13",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
"integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
"license": "MIT",
"dependencies": {
"@floating-ui/core": "^1.6.0",
"@floating-ui/utils": "^0.2.9"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
"license": "MIT"
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "6.7.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",

View File

@ -38,6 +38,7 @@
"dependencies": {
"@alpinejs/sort": "^3.14.7",
"@arendjr/text-clipper": "npm:@jsr/arendjr__text-clipper@^3.0.0",
"@floating-ui/dom": "^1.6.13",
"@fortawesome/fontawesome-free": "^6.6.0",
"@fullcalendar/core": "^6.1.15",
"@fullcalendar/daygrid": "^6.1.15",