CSS-Only Tooltip Component (#278)

* Adapt Floatbar to FloatElement * Implement CSS-Only Tooltip * Extract whitespace wrap into new class * Add overflow to inventory container * Move hintcss and add license * Switch to Directive for Tooltip * chore: prettier formatting * Save parent classes * Rename directive export to tooltip * Add docs for extraClasses * Integrate tooltip in FloatElement * chore: run format
csfloat · Dec 5, 2024 · 749c4c6 · 749c4c6
1 parent aa3e690
commit 749c4c6
Show file tree

Hide file tree

Showing 7 changed files with 537 additions and 39 deletions.
diff --git a/src/lib/ui/floatbar.ts → src/lib/components/common/ui/floatbar.ts b/src/lib/ui/floatbar.ts → src/lib/components/common/ui/floatbar.ts
@@ -1,43 +1,48 @@
-import {LitElement, html, css} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {html, css} from 'lit';
+import {property} from 'lit/decorators.js';
+import {FloatElement} from '../../custom';
+import {CustomElement} from '../../injectors';
 
-@customElement('float-bar')
-export class FloatBar extends LitElement {
+@CustomElement()
+export class FloatBar extends FloatElement {
     @property({type: Number}) float!: number;
     @property({type: Number}) minFloat = 0;
     @property({type: Number}) maxFloat = 1;
 
-    static styles = css`
-        .market-float-bar-container {
-            position: relative;
-            width: 100%;
-            height: 8px;
-            margin: 5px 0;
-        }
+    static styles = [
+        ...FloatElement.styles,
+        css`
+            .market-float-bar-container {
+                position: relative;
+                width: 100%;
+                height: 8px;
+                margin: 5px 0;
+            }
 
-        .market-float-bar-marker {
-            position: absolute;
-            background-color: #d9d9d9;
-            width: 3px;
-            top: -3px;
-            height: 14px;
-            border-radius: 4px;
-        }
+            .market-float-bar-marker {
+                position: absolute;
+                background-color: #d9d9d9;
+                width: 3px;
+                top: -3px;
+                height: 14px;
+                border-radius: 4px;
+            }
 
-        .market-float-bar {
-            display: inline-block;
-            vertical-align: top;
-            height: 100%;
-            opacity: 0.8;
-        }
+            .market-float-bar {
+                display: inline-block;
+                vertical-align: top;
+                height: 100%;
+                opacity: 0.8;
+            }
 
-        .market-float-bar:first-of-type {
-            border-radius: 4px 0 0 4px;
-        }
-        .market-float-bar:last-of-type {
-            border-radius: 0 4px 4px 0;
-        }
-    `;
+            .market-float-bar:first-of-type {
+                border-radius: 4px 0 0 4px;
+            }
+            .market-float-bar:last-of-type {
+                border-radius: 0 4px 4px 0;
+            }
+        `,
+    ];
 
     private readonly floatConditions = [
         {min: 0, max: 7, color: 'green'},
@@ -68,10 +73,15 @@ export class FloatBar extends LitElement {
                 ) / dynamicWidth
             );
         };
+        const formatFloat = (value: number) => Number(value.toFixed(4));
+        const tooltipText = `Represents the float range of this skin (${formatFloat(this.minFloat)}-${formatFloat(
+            this.maxFloat
+        )})`;
 
         return html`
             <div class="market-float-bar-container" style="left: ${left}%; width: ${dynamicWidth.toFixed(2)}%;">
-                <div style="height: 100%; border-radius: 4px; overflow: hidden; font-size: 0;">
+                ${this.tooltip(tooltipText)}
+                <div style="height: 8px; border-radius: 4px; overflow: hidden; font-size: 0;">
                     ${this.floatConditions.map(
                         (cond) => html`
                             <div

diff --git a/src/lib/components/common/ui/tooltip.ts b/src/lib/components/common/ui/tooltip.ts
@@ -0,0 +1,55 @@
+import {css, CSSResult} from 'lit';
+import {ChildPart, directive, Directive, DirectiveParameters} from 'lit-html/directive.js';
+import {hintcss} from '../../../../thirdparty/hintcss/hintcss';
+
+class TooltipDirective extends Directive {
+    parentNode: Element | null = null;
+    label = '';
+    // Extra classes to customize the tooltip. See https://kushagra.dev/lab/hint/ for all available classes
+    extraClasses = '';
+
+    update(part: ChildPart, [label, extraClasses]: DirectiveParameters<this>) {
+        this.parentNode = part.parentNode as Element;
+        this.label = label;
+        if (extraClasses) {
+            this.extraClasses = extraClasses;
+        }
+
+        if (!this.parentNode) {
+            return;
+        }
+
+        const newParentClass = `${this.parentNode.getAttribute('class') || ''} hint--top hint--rounded hint--no-arrow ${
+            this.extraClasses
+        }`;
+
+        this.parentNode.setAttribute('class', newParentClass);
+        this.parentNode.setAttribute('aria-label', this.label);
+    }
+
+    render(label: string, extraClasses?: string) {}
+}
+
+export const tooltip = directive(TooltipDirective);
+
+export const tooltipStyles: CSSResult[] = [
+    hintcss,
+    css`
+        [class*='hint--'][aria-label]:after {
+            text-shadow: none;
+            font-family: 'Motiva Sans', Arial, Helvetica, sans-serif;
+            font-weight: normal;
+            line-height: normal;
+            text-align: center;
+            background: #c2c2c2;
+            color: #3d3d3f;
+            font-size: 11px;
+            border-radius: 3px;
+            padding: 5px;
+        }
+        .hint--whitespace-pre-wrap:after,
+        .hint--whitespace-pre-wrap:before {
+            white-space: pre-wrap;
+        }
+    `,
+];
diff --git a/src/lib/components/custom.ts b/src/lib/components/custom.ts
@@ -1,4 +1,5 @@
 import {css, LitElement} from 'lit';
+import {tooltip, tooltipStyles} from './common/ui/tooltip';
 
 function camelToDashCase(str: string) {
     return str
@@ -10,6 +11,7 @@ function camelToDashCase(str: string) {
 // LitElement wrapper with a pre-determined tag
 export class FloatElement extends LitElement {
     static styles = [
+        ...tooltipStyles,
         css`
             hr {
                 background-color: #1b2939;
@@ -61,4 +63,8 @@ export class FloatElement extends LitElement {
     static elem(): any {
         return document.createElement(this.tag());
     }
+
+    tooltip(label: string, extraClasses?: string) {
+        return tooltip(label, extraClasses);
+    }
 }
diff --git a/src/lib/components/inventory/selected_item_info.ts b/src/lib/components/inventory/selected_item_info.ts
@@ -18,7 +18,7 @@ import {Observe} from '../../utils/observers';
 import {FetchStallResponse} from '../../bridge/handlers/fetch_stall';
 import {gStallFetcher} from '../../services/stall_fetcher';
 import {Contract} from '../../types/float_market';
-import '../../ui/floatbar';
+import '../common/ui/floatbar';
 
 /**
  * Why do we bind to iteminfo0 AND iteminfo1?
@@ -138,8 +138,12 @@ export class SelectedItemInfo extends FloatElement {
         }
 
         return html`
-            <float-bar float=${this.itemInfo.floatvalue} minFloat=${this.itemInfo.min} maxFloat=${this.itemInfo.max}>
-            </float-bar>
+            <csfloat-float-bar
+                float=${this.itemInfo.floatvalue}
+                minFloat=${this.itemInfo.min}
+                maxFloat=${this.itemInfo.max}
+            >
+            </csfloat-float-bar>
         `;
     }
 
@@ -222,5 +226,11 @@ export class SelectedItemInfo extends FloatElement {
                 .fetch({steam_id64: g_ActiveInventory?.m_owner.strSteamId})
                 .then((stall) => (this.stall = stall));
         }
+
+        // Make sure the parent container can overflow
+        const parentContainer = this.closest<HTMLElement>('.item_desc_content');
+        if (parentContainer) {
+            parentContainer.style.overflow = 'visible';
+        }
     }
 }
diff --git a/src/lib/components/market/item_row_wrapper.ts b/src/lib/components/market/item_row_wrapper.ts
@@ -13,7 +13,7 @@ import {gFilterService} from '../../services/filter';
 import {AppId, ContextId, Currency} from '../../types/steam_constants';
 import {defined} from '../../utils/checkers';
 import {pickTextColour} from '../../utils/colours';
-import '../../ui/floatbar';
+import '../common/ui/floatbar';
 
 @CustomElement()
 @InjectAppend('#searchResultsRows .market_listing_row .market_listing_item_name_block', InjectionMode.CONTINUOUS)
@@ -189,8 +189,12 @@ export class ItemRowWrapper extends FloatElement {
         }
 
         return html`
-            <float-bar float=${this.itemInfo.floatvalue} minFloat=${this.itemInfo.min} maxFloat=${this.itemInfo.max}>
-            </float-bar>
+            <csfloat-float-bar
+                float=${this.itemInfo.floatvalue}
+                minFloat=${this.itemInfo.min}
+                maxFloat=${this.itemInfo.max}
+            >
+            </csfloat-float-bar>
         `;
     }
 }
diff --git a/src/thirdparty/hintcss/LICENSE b/src/thirdparty/hintcss/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Kushagra Gour
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.