@nysds/nys-tooltip 1.13.1 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/nys-tooltip.d.ts +92 -0
- package/dist/nys-tooltip.figma.d.ts +1 -0
- package/dist/nys-tooltip.js +14 -14
- package/package.json +2 -2
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./nys-tooltip";
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* Shows contextual help text on hover/focus. Auto-positions to stay within viewport and supports keyboard dismiss.
|
|
4
|
+
*
|
|
5
|
+
* Link to a trigger element via `for` attribute matching the trigger's `id`. Tooltip appears on hover or focus
|
|
6
|
+
* and dismisses on blur, mouse leave, or Escape key. Use for supplementary info only—not critical content.
|
|
7
|
+
*
|
|
8
|
+
* @summary Contextual tooltip with auto-positioning, keyboard support, and screen reader integration.
|
|
9
|
+
* @element nys-tooltip
|
|
10
|
+
*
|
|
11
|
+
* @example Tooltip for button
|
|
12
|
+
* ```html
|
|
13
|
+
* <nys-button id="help-btn" label="Help" circle icon="help"></nys-button>
|
|
14
|
+
* <nys-tooltip for="help-btn" text="Click for assistance"></nys-tooltip>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* @example Positioned tooltip
|
|
18
|
+
* ```html
|
|
19
|
+
* <nys-icon id="info-icon" name="info"></nys-icon>
|
|
20
|
+
* <nys-tooltip for="info-icon" text="Additional details" position="right"></nys-tooltip>
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare class NysTooltip extends LitElement {
|
|
24
|
+
static styles: import("lit").CSSResult;
|
|
25
|
+
/** Unique identifier. Auto-generated if not provided. */
|
|
26
|
+
id: string;
|
|
27
|
+
/** Tooltip content text. Required. */
|
|
28
|
+
text: string;
|
|
29
|
+
/** Adjusts colors for dark backgrounds. */
|
|
30
|
+
inverted: boolean;
|
|
31
|
+
/** ID of the trigger element to attach this tooltip to. Required. */
|
|
32
|
+
for: string;
|
|
33
|
+
private _active;
|
|
34
|
+
private _userHasSetPosition;
|
|
35
|
+
private _originalUserPosition;
|
|
36
|
+
private _internallyUpdatingPosition;
|
|
37
|
+
private _hideTimeout;
|
|
38
|
+
private _position;
|
|
39
|
+
/**
|
|
40
|
+
* Preferred position relative to trigger. Auto-adjusts if space is insufficient.
|
|
41
|
+
* @default null (auto-positioned based on available space)
|
|
42
|
+
*/
|
|
43
|
+
get position(): "top" | "bottom" | "left" | "right" | null;
|
|
44
|
+
set position(value: "top" | "bottom" | "left" | "right" | null);
|
|
45
|
+
/**
|
|
46
|
+
* Lifecycle Methods
|
|
47
|
+
* --------------------------------------------------------------------------
|
|
48
|
+
*/
|
|
49
|
+
constructor();
|
|
50
|
+
connectedCallback(): void;
|
|
51
|
+
disconnectedCallback(): void;
|
|
52
|
+
firstUpdated(): Promise<void>;
|
|
53
|
+
updated(changedProps: Map<string, unknown>): void;
|
|
54
|
+
/**
|
|
55
|
+
* Event Handlers
|
|
56
|
+
* --------------------------------------------------------------------------
|
|
57
|
+
*/
|
|
58
|
+
private _showTooltip;
|
|
59
|
+
private _handleBlurOrMouseLeave;
|
|
60
|
+
private _triggerFadeOut;
|
|
61
|
+
private _cancelFadeOut;
|
|
62
|
+
private _addScrollListeners;
|
|
63
|
+
private _removeScrollListeners;
|
|
64
|
+
private _handleScrollOrResize;
|
|
65
|
+
private _handleEscapeKey;
|
|
66
|
+
/**
|
|
67
|
+
* Functions
|
|
68
|
+
* --------------------------------------------------------------------------
|
|
69
|
+
*/
|
|
70
|
+
private _getReferenceElement;
|
|
71
|
+
private _passAria;
|
|
72
|
+
/**
|
|
73
|
+
* In React, the reference element found is often the native HTML element within the nys-component.
|
|
74
|
+
* Therefore, this function accounts for the closest NYS component ancestor that supports a tooltip prop.
|
|
75
|
+
*/
|
|
76
|
+
private _applyTooltipPropToFormComponent;
|
|
77
|
+
private _applyFocusBehavior;
|
|
78
|
+
/**
|
|
79
|
+
* Checks if the tooltip fits inside the viewport on the given side of the trigger.
|
|
80
|
+
* Used for auto-positioning. Ignores text overflow for now.
|
|
81
|
+
*/
|
|
82
|
+
private _doesPositionFit;
|
|
83
|
+
private _userPositionTooltip;
|
|
84
|
+
private _autoPositionTooltip;
|
|
85
|
+
private _positionStartingBase;
|
|
86
|
+
private _positionTooltipElement;
|
|
87
|
+
private applyInverseTransform;
|
|
88
|
+
private _setInternalPosition;
|
|
89
|
+
private _shiftTooltipIntoViewport;
|
|
90
|
+
private _resetTooltipPositioningStyles;
|
|
91
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
92
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/nys-tooltip.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LitElement as m, unsafeCSS as y, html as u } from "lit";
|
|
2
|
-
import { property as
|
|
3
|
-
const v = `:host{--_nys-tooltip-color: var(--nys-color-text-reverse, #ffffff);--_nys-tooltip-background-color: var(--nys-color-ink, #1b1b1b);--_nys-tooltip-border-radius: var(--nys-radius-md, 4px);--_nys-tooltip-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-tooltip-font-size: var(--nys-type-size-ui-sm, 14px);--_nys-tooltip-letter-spacing: var(--nys-font-letterspacing-ui-sm, .044px);--_nys-tooltip-line-height: var(--nys-font-lineheight-ui-sm, 24px)}.nys-tooltip__content{position:fixed;top:0;left:0;max-width:400px;width:max-content;max-height:120px;padding:var(--nys-space-50, 4px) var(--nys-space-100, 8px);background-color:var(--_nys-tooltip-background-color);border-radius:var(--_nys-tooltip-border-radius);cursor:auto;z-index:1}.nys-tooltip__inner{
|
|
4
|
-
var w = Object.defineProperty, b = Object.getOwnPropertyDescriptor,
|
|
2
|
+
import { property as c, state as g } from "lit/decorators.js";
|
|
3
|
+
const v = `:host{--_nys-tooltip-color: var(--nys-color-text-reverse, #ffffff);--_nys-tooltip-background-color: var(--nys-color-ink, #1b1b1b);--_nys-tooltip-border-radius: var(--nys-radius-md, 4px);--_nys-tooltip-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-tooltip-font-size: var(--nys-type-size-ui-sm, 14px);--_nys-tooltip-letter-spacing: var(--nys-font-letterspacing-ui-sm, .044px);--_nys-tooltip-line-height: var(--nys-font-lineheight-ui-sm, 24px)}.nys-tooltip__content{position:fixed;top:0;left:0;max-width:400px;width:max-content;max-height:120px;padding:var(--nys-space-50, 4px) var(--nys-space-100, 8px);background-color:var(--_nys-tooltip-background-color);border-radius:var(--_nys-tooltip-border-radius);cursor:auto;z-index:1}.nys-tooltip__inner{color:var(--_nys-tooltip-color);font-family:var(--_nys-tooltip-font-family);font-size:var(--_nys-tooltip-font-size);font-weight:400;line-height:var(--_nys-tooltip-line-height);letter-spacing:var(--_nys-tooltip-letter-spacing);white-space:normal;overflow-wrap:anywhere;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical}.nys-tooltip__arrow{position:absolute;width:14px;height:6px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="6" viewBox="0 0 15 6" fill="none"><path d="M8.15079 5.44218C7.7763 5.76317 7.2237 5.76317 6.84921 5.44218L0.5 0H14.5L8.15079 5.44218Z" fill="%231B1B1B"/></svg>') no-repeat center}.nys-tooltip__content[active]{display:block}.fade-out{opacity:0;transition:opacity .2s ease-out}:host([position=top]) .nys-tooltip__arrow{top:100%;left:var(--arrow-offset-x, 50%);transform:translate(-50%)}:host([position=bottom]) .nys-tooltip__arrow{bottom:100%;left:var(--arrow-offset-x, 50%);transform:translate(-50%) rotate(180deg)}:host([position=left]) .nys-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%) rotate(-90deg);margin-left:-4px}:host([position=right]) .nys-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%) rotate(90deg);margin-right:-4px}:host([inverted]) .nys-tooltip__content{--_nys-tooltip-color: var(--nys-color-text, #1b1b1b);--_nys-tooltip-background-color: var(--nys-color-ink-reverse, #ffffff)}:host([inverted]) .nys-tooltip__arrow{background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="6" viewBox="0 0 15 6" fill="none"><path d="M8.15079 5.44218C7.7763 5.76317 7.2237 5.76317 6.84921 5.44218L0.5 0H14.5L8.15079 5.44218Z" fill="white"/></svg>') no-repeat center}@media(max-width:400px){.nys-tooltip__content{max-width:calc(100vw - 2rem)}}`;
|
|
4
|
+
var w = Object.defineProperty, b = Object.getOwnPropertyDescriptor, p = (f, t, e, n) => {
|
|
5
5
|
for (var o = n > 1 ? void 0 : n ? b(t, e) : t, i = f.length - 1, s; i >= 0; i--)
|
|
6
6
|
(s = f[i]) && (o = (n ? s(t, e, o) : s(o)) || o);
|
|
7
7
|
return n && o && w(t, e, o), o;
|
|
@@ -261,23 +261,23 @@ const d = class d extends m {
|
|
|
261
261
|
};
|
|
262
262
|
d.styles = y(v);
|
|
263
263
|
let h = d;
|
|
264
|
-
|
|
265
|
-
|
|
264
|
+
p([
|
|
265
|
+
c({ type: String, reflect: !0 })
|
|
266
266
|
], h.prototype, "id", 2);
|
|
267
|
-
|
|
268
|
-
|
|
267
|
+
p([
|
|
268
|
+
c({ type: String })
|
|
269
269
|
], h.prototype, "text", 2);
|
|
270
|
-
|
|
271
|
-
|
|
270
|
+
p([
|
|
271
|
+
c({ type: Boolean, reflect: !0 })
|
|
272
272
|
], h.prototype, "inverted", 2);
|
|
273
|
-
|
|
274
|
-
|
|
273
|
+
p([
|
|
274
|
+
c({ type: String })
|
|
275
275
|
], h.prototype, "for", 2);
|
|
276
|
-
|
|
276
|
+
p([
|
|
277
277
|
g()
|
|
278
278
|
], h.prototype, "_active", 2);
|
|
279
|
-
|
|
280
|
-
|
|
279
|
+
p([
|
|
280
|
+
c({ type: String, reflect: !0 })
|
|
281
281
|
], h.prototype, "position", 1);
|
|
282
282
|
customElements.get("nys-tooltip") || customElements.define("nys-tooltip", h);
|
|
283
283
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-tooltip",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "The Tooltip component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-tooltip.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"lit": "^3.3.1",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"vite": "^7.1
|
|
28
|
+
"vite": "^7.3.1"
|
|
29
29
|
},
|
|
30
30
|
"keywords": [
|
|
31
31
|
"new-york-state",
|