tooltip: rework as pseudo-component, fix overflow

uses the <tool-tip> tag now, and the setupTooltips() function in ui.ts must be called at any point in the pages load. added "below-center" position, showing below and centered horizontally. breakpoint tailwind lingo also now works (e.g. "below-center sm:right"). If a left or right-aligned tooltip clips off the screen, it will be shifted the appropriate amount left/right to avoid that automatically.
2026-03-18 21:50:33 +01:00 · 2026-01-05 15:21:45 +00:00
parent ee96bb9f1b
commit 455bde491f
13 changed files with 261 additions and 93 deletions
--- a/css/tooltip.css
+++ b/css/tooltip.css
@@ -1,13 +1,15 @@
-.tooltip {
+@layer components {
+    tool-tip {
        position: relative;
        display: inline-block;
-}
+    }

-.tooltip .content {
+    tool-tip .content {
        visibility: hidden;
        opacity: 0;
+        width: max-content;
        max-width: 16rem;
-    min-width: 6rem;
+        /*min-width: 6rem;*/
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 0.5rem;
@@ -19,53 +21,75 @@
        position: absolute;
        z-index: 1;
        top: -1rem;
-}
+    }

-.tooltip.below .content {
+    tool-tip.above {
+        --tooltip-position: above;
+    }
+    tool-tip.below {
+        --tooltip-position: below;
+    }
+    tool-tip.below-center {
+        --tooltip-position: below-center;
+    }
+    tool-tip.left {
+        --tooltip-position: left;
+    }
+    tool-tip.right {
+        --tooltip-position: right;
+    }
+
+    tool-tip.below .content {
        top: calc(100% + 0.125rem);
        left: 50%;
        right: 0;
        transform: translateX(-50%);
-}
+    }

-.tooltip.above .content {
+    tool-tip.below-center .content {
+        top: calc(100% + 0.125rem);
+        max-width: calc(100vw - 4rem);
+    }
+
+    tool-tip.above .content {
        top: unset;
        bottom: calc(100% + 0.125rem);
        left: 50%;
        right: 0;
        transform: translateX(-50%);
-}
+    }

-.tooltip.darker .content {
+    tool-tip.darker .content {
        background-color: rgba(0, 0, 0, 0.8);
-}
+    }

-.tooltip.right .content {
-    left: 120%;
-}
+    tool-tip.right .content {
+        left: 0%;
+    }

-.tooltip.right:dir(rtl):not(.force-ltr) .content {
-    right: 120%;
+    tool-tip.right:dir(rtl):not(.force-ltr) .content {
+        right: 0%;
        left: unset;
-}
+    }

-.tooltip.left .content {
-    right: 120%;
-}
+    tool-tip.left .content {
+        right: 0%;
+    }

-.tooltip.left:dir(rtl):not(.force-ltr) .content {
-    left: 120%;
+    tool-tip.left:dir(rtl):not(.force-ltr) .content {
+        left: 0%;
        right: unset;
-}
+    }

-.tooltip .content.sm {
+    tool-tip .content.sm {
        font-size: 0.8rem;
-}
+    }

-.tooltip:hover .content,
-.tooltip:focus .content,
-.tooltip:focus-within .content
-{
+    /*tool-tip:hover .content,
+    tool-tip:focus .content,
+    tool-tip:focus-within .content*/
+    tool-tip.shown .content {
        visibility: visible;
        opacity: 1;
+    }
 }
--- a/html/admin.html
+++ b/html/admin.html
@@ -229,10 +229,10 @@
                        <label class="switch">
                            <input type="checkbox" id="expiry-use-previous">
                            <span>{{ .strings.extendFromPreviousExpiry }}</span>
-                            <div class="tooltip left">
+                            <tool-tip class="left">
                                <i class="icon ri-information-line align-middle"></i>
                                <div class="content sm w-max">{{ .strings.extendFromPreviousExpiryDescription }}</div>
-                            </div>
+                            </tool-tip>
                        </label>
                    </div>
                    <label class="switch">
@@ -547,7 +547,7 @@
            </form>
        </div>
        <div id="notification-box"></div>
-        <div class="page-container m-2 lg:my-20 lg:mx-64 flex flex-col gap-4 overflow-x-hidden">
+        <div class="page-container m-2 lg:my-20 lg:mx-64 flex flex-col gap-4">
            <div class="top-2 inset-x-2 lg:absolute flex flex-row justify-between">
                <div class="flex flex-row gap-2">
                    {{ template "lang-select.html" . }}
@@ -718,13 +718,13 @@
                            <div class="flex flex-row align-middle w-full gap-2">
                                <input type="search" class="field ~neutral @low input search" id="accounts-search" placeholder="{{ .strings.search }}">
                                <span class="button ~neutral @low center inside-input rounded-s-none accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
-                                <div class="tooltip left">
+                                <tool-tip class="below">
                                    <button class="button ~info @low center h-full accounts-search-server gap-1" aria-label="{{ .strings.searchAllRecords }}" text="{{ .strings.searchAllRecords }}">
                                        <i class="ri-search-line"></i>
                                        <span>{{ .strings.searchAll }}</span>
                                    </button>
                                    <span class="content sm">{{ .strings.searchAllRecords }}</span>
-                                </div>
+                                </tool-tip>
                                <button class="button ~info @low" id="accounts-refresh" aria-label="{{ .strings.refresh }}" disabled><i class="ri-refresh-line"></i></button>
                            </div>
                        </div>
@@ -828,13 +828,13 @@
                            <div class="flex flex-row align-middle w-full gap-2">
                                <input type="search" class="field ~neutral @low input search" id="activity-search" placeholder="{{ .strings.search }}">
                                <span class="button ~neutral @low center inside-input rounded-s-none activity-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
-                                <div class="tooltip left">
+                                <tool-tip class="below">
                                    <button class="button ~info @low center h-full activity-search-server gap-1" aria-label="{{ .strings.searchAllRecords }}" text="{{ .strings.searchAllRecords }}">
                                        <i class="ri-search-line"></i>
                                        <span>{{ .strings.searchAll }}</span>
                                    </button>
                                    <span class="content sm">{{ .strings.searchAllRecords }}</span>
-                                </div>
+                                </tool-tip>
                                <button class="button ~info @low" id="activity-refresh" aria-label="{{ .strings.refresh }}" disabled><i class="ri-refresh-line"></i></button>
                            </div>
                        </div>
--- a/ts/admin.ts
+++ b/ts/admin.ts
@@ -10,9 +10,12 @@ import { ProfileEditor, reloadProfileNames } from "./modules/profiles.js";
 import { _get, _post, notificationBox, whichAnimationEvent, bindManualDropdowns } from "./modules/common.js";
 import { Updater } from "./modules/update.js";
 import { Login } from "./modules/login.js";
+import { setupTooltips } from "./modules/ui.js";

 declare var window: GlobalWindow;

+setupTooltips();
+
 const theme = new ThemeManager(document.getElementById("button-theme"));

 window.lang = new lang(window.langFile as LangFile);
--- a/ts/form.ts
+++ b/ts/form.ts
@@ -5,6 +5,7 @@ import { loadLangSelector } from "./modules/lang.js";
 import { Validator, ValidatorConf, ValidatorRespDTO } from "./modules/validator.js";
 import { Discord, Telegram, Matrix, ServiceConfiguration, MatrixConfiguration } from "./modules/account-linking.js";
 import { Captcha, GreCAPTCHA } from "./modules/captcha.js";
+import { setupTooltips } from "./modules/ui.js";

 interface formWindow extends GlobalWindow {
    invalidPassword: string;
@@ -42,6 +43,8 @@ interface formWindow extends GlobalWindow {
    collectEmail: boolean;
 }

+setupTooltips();
+
 loadLangSelector("form");

 window.notifications = new notificationBox(document.getElementById("notification-box") as HTMLDivElement);
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -1106,7 +1106,7 @@ export class accountsList extends PaginatedList implements Navigatable, AsTab {
            itemsPerPage: 40,
            maxItemsLoadedForSearch: 200,
            appendNewItems: (resp: PaginatedDTO) => {
-                console.log("append");
+                // console.log("append");
                for (let u of (resp as UsersDTO).users || []) {
                    if (this.users.has(u.id)) {
                        this.users.get(u.id).update(u);
@@ -1122,7 +1122,7 @@ export class accountsList extends PaginatedList implements Navigatable, AsTab {
                );
            },
            replaceWithNewItems: (resp: PaginatedDTO) => {
-                console.log("replace");
+                // console.log("replace");
                let accountsOnDOM = new Map<string, boolean>();

                for (let id of this.users.keys()) {
--- a/ts/modules/invites.ts
+++ b/ts/modules/invites.ts
@@ -13,7 +13,7 @@ import {
 } from "../modules/common.js";
 import { DiscordSearch, DiscordUser, newDiscordSearch } from "../modules/discord.js";
 import { reloadProfileNames } from "../modules/profiles.js";
-import { HiddenInputField, RadioBasedTabSelector } from "./ui.js";
+import { HiddenInputField, RadioBasedTabSelector, Tooltip } from "./ui.js";

 declare var window: GlobalWindow;

@@ -205,10 +205,9 @@ class DOMInvite implements Invite {
    }
    set send_to(address: string | null) {
        this._send_to = address;
-        const container = this._infoArea.querySelector(".tooltip") as HTMLDivElement;
+        const container = this._infoArea.querySelector("tool-tip") as Tooltip;
        const icon = container.querySelector("i");
        const chip = container.querySelector("span.inv-email-chip");
-        const tooltip = container.querySelector("span.content") as HTMLSpanElement;
        if (!address) {
            icon.classList.remove("ri-mail-line");
            icon.classList.remove("ri-mail-close-line");
@@ -232,7 +231,7 @@ class DOMInvite implements Invite {
            }
        }
        // innerHTML as the newer sent_to re-uses this with HTML.
-        tooltip.innerHTML = address;
+        container.content.innerHTML = address;
    }
    private _sendToDialog: SendToDialog;
    private _sent_to: SentToList;
@@ -603,10 +602,10 @@ class DOMInvite implements Invite {
        this._header.appendChild(this._infoArea);
        this._infoArea.classList.add("inv-infoarea", "flex", "flex-row", "items-center", "gap-2");
        this._infoArea.innerHTML = `
-        <div class="tooltip below darker" tabindex="0">
+        <tool-tip class="below darker" tabindex="0">
            <span class="inv-email-chip h-full"><i></i></span>
            <span class="content sm p-1"></span>
-        </div>
+        </tool-tip>
        <span class="button ~critical @low inv-delete h-full">${window.lang.strings("delete")}</span>
        <label>
            <i class="icon px-2.5 py-2 ri-arrow-down-s-line text-xl not-rotated"></i>
--- a/ts/modules/search.ts
+++ b/ts/modules/search.ts
@@ -751,7 +751,7 @@ export class Search implements Navigatable {
            triggerManually = !url.searchParams.has("search");
            url.searchParams.delete("search");
        }
-        console.log("pushing", url.toString());
+        // console.log("pushing", url.toString());
        window.history.pushState(null, "", url.toString());
        if (triggerManually) this.navigate();
    };
--- a/ts/modules/settings.ts
+++ b/ts/modules/settings.ts
@@ -14,6 +14,7 @@ import {
 } from "../modules/common.js";
 import { Marked } from "@ts-stack/markdown";
 import { stripMarkdown } from "../modules/stripmd.js";
+import { Tooltip } from "./ui.js";

 declare var window: GlobalWindow;

@@ -109,7 +110,7 @@ class DOMSetting {
    protected _hideEl: HTMLElement;
    protected _input: HTMLInputElement;
    protected _container: HTMLDivElement;
-    protected _tooltip: HTMLDivElement;
+    protected _tooltip: Tooltip;
    protected _required: HTMLSpanElement;
    protected _restart: HTMLSpanElement;
    protected _advanced: boolean;
@@ -154,11 +155,10 @@ class DOMSetting {
    }

    get description(): string {
-        return this._tooltip.querySelector("span.content").textContent;
+        return this._tooltip.content.textContent;
    }
    set description(d: string) {
-        const content = this._tooltip.querySelector("span.content") as HTMLSpanElement;
-        content.textContent = d;
+        this._tooltip.content.textContent = d;
        if (d == "") {
            this._tooltip.classList.add("unfocused");
        } else {
@@ -248,17 +248,17 @@ class DOMSetting {
            ${inputOnTop ? input : ""}
            <div class="flex flex-row gap-2 items-baseline">
                <span class="setting-label"></span>
-                <div class="setting-tooltip tooltip right unfocused">
+                <tool-tip class="setting-tooltip below-center sm:right unfocused">
                    <i class="icon ri-information-line align-[-0.05rem]"></i>
                    <span class="content sm"></span>
-                </div>
+                </tool-tip>
                <span class="setting-required unfocused"></span>
                <span class="setting-restart unfocused"></span>
            </div>
            ${inputOnTop ? "" : input}
        </label>
        `;
-        this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
+        this._tooltip = this._container.querySelector("tool-tip.setting-tooltip") as Tooltip;
        this._required = this._container.querySelector("span.setting-required") as HTMLSpanElement;
        this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
        // "input" variable should supply the HTML of an element with class "setting-input"
@@ -1406,8 +1406,8 @@ export class settingsList implements AsTab {

        // Create (restart)required badges (can't do on load as window.lang is unset)
        RestartRequiredBadge = (() => {
-            const rr = document.createElement("span");
-            rr.classList.add("tooltip", "below", "force-ltr");
+            const rr = document.createElement("tool-tip") as Tooltip;
+            rr.classList.add("below", "force-ltr");
            rr.innerHTML = `
                <span class="badge ~info dark:~d_warning align-[0.08rem]"><i class="icon ri-refresh-line h-full"></i></span>
                <span class="content sm">${window.lang.strings("restartRequired")}</span>
@@ -1416,8 +1416,8 @@ export class settingsList implements AsTab {
            return rr;
        })();
        RequiredBadge = (() => {
-            const r = document.createElement("span");
-            r.classList.add("tooltip", "below", "force-ltr");
+            const r = document.createElement("tool-tip");
+            r.classList.add("below", "force-ltr");
            r.innerHTML = `
                <span class="badge ~critical align-[0.08rem]"><i class="icon ri-asterisk h-full"></i></span>
                <span class="content sm">${window.lang.strings("required")}</span>
@@ -1490,8 +1490,8 @@ export class settingsList implements AsTab {
                    this._sections[section.section].update(section);
                } else {
                    if (section.section == "messages" || section.section == "user_page") {
-                        const editButton = document.createElement("div");
-                        editButton.classList.add("tooltip", "left", "h-full", "force-ltr");
+                        const editButton = document.createElement("tool-tip");
+                        editButton.classList.add("left", "h-full", "force-ltr");
                        editButton.innerHTML = `
                        <span class="button ~neutral @low h-full">
                            <i class="icon ri-edit-line"></i>
@@ -1528,8 +1528,8 @@ export class settingsList implements AsTab {
                        }
                        this.addSection(section.section, section, icon);
                    } else if (section.section == "matrix" && !window.matrixEnabled) {
-                        const addButton = document.createElement("div");
-                        addButton.classList.add("tooltip", "left", "h-full", "force-ltr");
+                        const addButton = document.createElement("tool-tip");
+                        addButton.classList.add("left", "h-full", "force-ltr");
                        addButton.innerHTML = `
                        <span class="button ~neutral h-full"><i class="icon ri-links-line"></i></span>
                        <span class="content sm">
@@ -1912,10 +1912,10 @@ class MessageEditor {
                    `;
                        if (this._names[id].description != "")
                            innerHTML += `
-                        <div class="tooltip right">
+                        <tool-tip class="right">
                            <i class="icon ri-information-line"></i>
                            <span class="content sm">${this._names[id].description}</span>
-                        </div>
+                        </tool-tip>
                    `;
                        innerHTML += `
                    </td>
--- a/ts/modules/ui.ts
+++ b/ts/modules/ui.ts
@@ -209,3 +209,130 @@ export class RadioBasedTabSelector {
        }
    }
 }
+
+type TooltipPosition = "above" | "below" | "below-center" | "left" | "right";
+
+export class Tooltip extends HTMLElement {
+    private _content: HTMLElement;
+    get content(): HTMLElement {
+        if (!this._content) return this.getElementsByClassName("content")[0] as HTMLElement;
+        return this._content;
+    }
+
+    connectedCallback() {
+        this.setup();
+    }
+
+    get visible(): boolean {
+        return this.classList.contains("shown");
+    }
+
+    get position(): TooltipPosition {
+        return window.getComputedStyle(this).getPropertyValue("--tooltip-position").trim() as TooltipPosition;
+    }
+
+    toggle() {
+        console.log("toggle!");
+        this.visible ? this.close() : this.open();
+    }
+
+    clicked: boolean = false;
+
+    private _listener = (event: MouseEvent | TouchEvent) => {
+        if (event.target !== this && !this.contains(event.target as HTMLElement)) {
+            this.close();
+            document.removeEventListener("mousedown", this._listener);
+            // document.removeEventListener("touchstart", this._listener);
+        }
+    };
+
+    open() {
+        this.fixWidth(() => {
+            this.classList.add("shown");
+            if (this.clicked) {
+                document.addEventListener("mousedown", this._listener);
+                // document.addEventListener("touchstart", this._listener);
+            }
+        });
+    }
+
+    close() {
+        this.clicked = false;
+        this.classList.remove("shown");
+    }
+
+    setup() {
+        this._content = this.getElementsByClassName("content")[0] as HTMLElement;
+        const clickEvent = () => {
+            if (this.clicked) {
+                console.log("clicked again!");
+                this.toggle();
+            } else {
+                console.log("clicked!");
+                this.clicked = true;
+                this.open();
+            }
+        };
+        /// this.addEventListener("touchstart", clickEvent);
+        this.addEventListener("click", clickEvent);
+        this.addEventListener("mouseover", () => {
+            this.open();
+        });
+        this.addEventListener("mouseleave", () => {
+            if (this.clicked) return;
+            console.log("mouseleave");
+            this.close();
+        });
+    }
+
+    fixWidth(after?: () => void) {
+        this._content.style.left = "";
+        this._content.style.right = "";
+        if (this.position == "below-center") {
+            const offset = this.offsetLeft;
+            const pw = (this.offsetParent as HTMLElement).offsetWidth;
+            const cw = this._content.offsetWidth;
+            const pos = -1 * offset + (pw - cw) / 2.0;
+            this._content.style.left = pos + "px";
+        }
+        const [leftObscured, rightObscured] = wherePartiallyObscuredX(this._content);
+        if (rightObscured) {
+            const rect = this._content.getBoundingClientRect();
+            this._content.style.left =
+                "calc(-1rem + " + ((window.innerWidth || document.documentElement.clientHeight) - rect.right) + "px)";
+        }
+        if (leftObscured) {
+            const rect = this._content.getBoundingClientRect();
+            this._content.style.right = "calc(-1rem + " + rect.left + "px)";
+            "calc(-1rem + " + ((window.innerWidth || document.documentElement.clientHeight) - rect.right) + "px)";
+        }
+        if (after) after();
+    }
+}
+
+export function setupTooltips() {
+    customElements.define("tool-tip", Tooltip);
+}
+
+export function isPartiallyObscuredX(el: HTMLElement): boolean {
+    const rect = el.getBoundingClientRect();
+    return rect.left < 0 || rect.right > (window.innerWidth || document.documentElement.clientWidth);
+}
+
+export function wherePartiallyObscuredX(el: HTMLElement): [boolean, boolean] {
+    const rect = el.getBoundingClientRect();
+    return [Boolean(rect.left < 0), Boolean(rect.right > (window.innerWidth || document.documentElement.clientWidth))];
+}
+
+export function isPartiallyObscuredY(el: HTMLElement): boolean {
+    const rect = el.getBoundingClientRect();
+    return rect.top < 0 || rect.bottom > (window.innerHeight || document.documentElement.clientHeight);
+}
+
+export function wherePartiallyObscuredY(el: HTMLElement): [boolean, boolean] {
+    const rect = el.getBoundingClientRect();
+    return [
+        Boolean(rect.top < 0),
+        Boolean(rect.bottom > (window.innerHeight || document.documentElement.clientHeight)),
+    ];
+}
--- a/ts/pwr-pin.ts
+++ b/ts/pwr-pin.ts
@@ -1,7 +1,10 @@
 import { toClipboard, notificationBox } from "./modules/common.js";
+import { setupTooltips } from "./modules/ui.js";

 declare var window: GlobalWindow;

+setupTooltips();
+
 const pin = document.getElementById("pin") as HTMLSpanElement;

 if (pin) {
--- a/ts/pwr.ts
+++ b/ts/pwr.ts
@@ -3,6 +3,7 @@ import { Validator, ValidatorConf } from "./modules/validator.js";
 import { _post, addLoader, removeLoader } from "./modules/common.js";
 import { loadLangSelector } from "./modules/lang.js";
 import { Captcha, GreCAPTCHA } from "./modules/captcha.js";
+import { setupTooltips } from "./modules/ui.js";

 interface formWindow extends Window {
    invalidPassword: string;
@@ -39,6 +40,8 @@ loadLangSelector("pwr");

 declare var window: formWindow;

+setupTooltips();
+
 const form = document.getElementById("form-create") as HTMLFormElement;
 const submitInput = form.querySelector("input[type=submit]") as HTMLInputElement;
 const submitSpan = form.querySelector("span.submit") as HTMLSpanElement;
--- a/ts/setup.ts
+++ b/ts/setup.ts
@@ -2,6 +2,7 @@ import { _get, _post, toggleLoader, notificationBox } from "./modules/common.js"
 import { lang, LangFile, loadLangSelector } from "./modules/lang.js";
 import { ThemeManager } from "./modules/theme.js";
 import { PageManager } from "./modules/pages.js";
+import { setupTooltips } from "./modules/ui.js";

 interface sWindow extends GlobalWindow {
    messages: {};
@@ -9,6 +10,8 @@ interface sWindow extends GlobalWindow {

 declare var window: sWindow;

+setupTooltips();
+
 const theme = new ThemeManager(document.getElementById("button-theme"));

 window.notifications = new notificationBox(document.getElementById("notification-box") as HTMLDivElement, 5);
--- a/ts/user.ts
+++ b/ts/user.ts
@@ -17,6 +17,7 @@ import { Discord, Telegram, Matrix, ServiceConfiguration, MatrixConfiguration }
 import { Validator, ValidatorConf, ValidatorRespDTO } from "./modules/validator.js";
 import { PageManager } from "./modules/pages.js";
 import { generateCodeLink } from "./modules/invites.js";
+import { setupTooltips } from "./modules/ui.js";

 interface userWindow extends GlobalWindow {
    jellyfinID: string;
@@ -34,6 +35,8 @@ interface userWindow extends GlobalWindow {

 declare var window: userWindow;

+setupTooltips();
+
 // const basePath = window.location.pathname.replace("/password/reset", "");
 const basePath = window.pages.Base + window.pages.MyAccount;

@@ -757,7 +760,7 @@ document.addEventListener("details-reload", () => {
                }
                if (!messageCard.textContent) {
                    messageCard.innerHTML = `
-                    <span class="heading mb-2">${window.lang.strings("customMessagePlaceholderHeader")} ✏️ </span>
+                    <span class="heading mb-2">${window.lang.strings("customMessagePlaceholderHeader")} ✏ </span>
                    <span class="block">${window.lang.strings("customMessagePlaceholderContent")}</span>
                    `;
                }