+density on list

This commit is contained in:
Simon Martens
2026-01-16 23:04:07 +01:00
parent 0842f270b0
commit 0c63846024
8 changed files with 331 additions and 98 deletions

View File

@@ -9,15 +9,17 @@ export class ToolTip extends HTMLElement {
this._timeout = 200;
this._hideTimeout = null;
this._hiddenTimeout = null;
this._dataTipElem = null;
this._observer = null;
}
connectedCallback() {
this.classList.add("relative", "block", "leading-none", "[&>*]:leading-normal");
const dataTipElem = this.querySelector(".data-tip");
const tipContent = dataTipElem ? dataTipElem.innerHTML : "Tooltip";
this._dataTipElem = this.querySelector(".data-tip");
const tipContent = this._dataTipElem ? this._dataTipElem.innerHTML : "Tooltip";
if (dataTipElem) {
dataTipElem.classList.add("hidden");
if (this._dataTipElem) {
this._dataTipElem.classList.add("hidden");
}
this._tooltipBox = document.createElement("div");
@@ -46,6 +48,19 @@ export class ToolTip extends HTMLElement {
this.addEventListener("mouseenter", () => this._showTooltip());
this.addEventListener("mouseleave", () => this._hideTooltip());
if (this._dataTipElem) {
this._observer = new MutationObserver(() => {
if (this._tooltipBox) {
this._tooltipBox.innerHTML = this._dataTipElem.innerHTML;
}
});
this._observer.observe(this._dataTipElem, {
childList: true,
characterData: true,
subtree: true,
});
}
}
attributeChangedCallback(name, oldValue, newValue) {
@@ -57,6 +72,12 @@ export class ToolTip extends HTMLElement {
}
}
disconnectedCallback() {
if (this._observer) {
this._observer.disconnect();
}
}
_showTooltip() {
clearTimeout(this._hideTimeout);
clearTimeout(this._hiddenTimeout);