@vaadin/tooltip 24.1.5 → 24.2.0-alpha10
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/package.json +9 -9
- package/src/vaadin-tooltip-overlay.js +48 -46
- package/src/vaadin-tooltip.d.ts +6 -0
- package/src/vaadin-tooltip.js +55 -4
- package/theme/lumo/vaadin-tooltip.js +0 -1
- package/theme/material/vaadin-tooltip.js +0 -1
- package/web-types.json +13 -2
- package/web-types.lit.json +9 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/tooltip",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.2.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,21 +35,21 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@polymer/polymer": "^3.0.0",
|
|
38
|
-
"@vaadin/a11y-base": "
|
|
39
|
-
"@vaadin/component-base": "
|
|
40
|
-
"@vaadin/overlay": "
|
|
41
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
42
|
-
"@vaadin/vaadin-material-styles": "
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
38
|
+
"@vaadin/a11y-base": "24.2.0-alpha10",
|
|
39
|
+
"@vaadin/component-base": "24.2.0-alpha10",
|
|
40
|
+
"@vaadin/overlay": "24.2.0-alpha10",
|
|
41
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha10",
|
|
42
|
+
"@vaadin/vaadin-material-styles": "24.2.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha10"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@esm-bundle/chai": "^4.3.4",
|
|
47
|
-
"@vaadin/testing-helpers": "^0.
|
|
47
|
+
"@vaadin/testing-helpers": "^0.5.0",
|
|
48
48
|
"sinon": "^13.0.2"
|
|
49
49
|
},
|
|
50
50
|
"web-types": [
|
|
51
51
|
"web-types.json",
|
|
52
52
|
"web-types.lit.json"
|
|
53
53
|
],
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "ca16b5f88b00ae05fb6d7c7e9874525048e389f0"
|
|
55
55
|
}
|
|
@@ -3,73 +3,75 @@
|
|
|
3
3
|
* Copyright (c) 2022 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
6
|
+
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
|
+
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
8
|
+
import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
|
|
7
9
|
import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
|
|
8
|
-
import {
|
|
10
|
+
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
|
|
11
|
+
import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
12
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
z-index: 1100;
|
|
15
|
-
}
|
|
13
|
+
const tooltipOverlayStyles = css`
|
|
14
|
+
:host {
|
|
15
|
+
z-index: 1100;
|
|
16
|
+
}
|
|
16
17
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
[part='overlay'] {
|
|
19
|
+
max-width: 40ch;
|
|
20
|
+
}
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
:host([position^='top'][top-aligned]) [part='overlay'],
|
|
23
|
+
:host([position^='bottom'][top-aligned]) [part='overlay'] {
|
|
24
|
+
margin-top: var(--vaadin-tooltip-offset-top, 0);
|
|
25
|
+
}
|
|
25
26
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
:host([position^='top'][bottom-aligned]) [part='overlay'],
|
|
28
|
+
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
|
|
29
|
+
margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
|
|
30
|
+
}
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
:host([position^='start'][start-aligned]) [part='overlay'],
|
|
33
|
+
:host([position^='end'][start-aligned]) [part='overlay'] {
|
|
34
|
+
margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
|
|
35
|
+
}
|
|
35
36
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
:host([position^='start'][end-aligned]) [part='overlay'],
|
|
38
|
+
:host([position^='end'][end-aligned]) [part='overlay'] {
|
|
39
|
+
margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
|
|
40
|
+
}
|
|
40
41
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
42
|
+
@media (forced-colors: active) {
|
|
43
|
+
[part='overlay'] {
|
|
44
|
+
outline: 1px dashed;
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
);
|
|
46
|
+
}
|
|
47
|
+
`;
|
|
49
48
|
|
|
50
|
-
|
|
49
|
+
registerStyles('vaadin-tooltip-overlay', [overlayStyles, tooltipOverlayStyles], {
|
|
50
|
+
moduleId: 'vaadin-tooltip-overlay-styles',
|
|
51
|
+
});
|
|
51
52
|
|
|
52
53
|
/**
|
|
53
54
|
* An element used internally by `<vaadin-tooltip>`. Not intended to be used separately.
|
|
54
55
|
*
|
|
55
|
-
* @extends
|
|
56
|
+
* @extends HTMLElement
|
|
57
|
+
* @mixes DirMixin
|
|
58
|
+
* @mixes OverlayMixin
|
|
59
|
+
* @mixes PositionMixin
|
|
60
|
+
* @mixes ThemableMixin
|
|
56
61
|
* @private
|
|
57
62
|
*/
|
|
58
|
-
class TooltipOverlay extends PositionMixin(
|
|
63
|
+
class TooltipOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
|
|
59
64
|
static get is() {
|
|
60
65
|
return 'vaadin-tooltip-overlay';
|
|
61
66
|
}
|
|
62
67
|
|
|
63
68
|
static get template() {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
return memoizedTemplate;
|
|
69
|
+
return html`
|
|
70
|
+
<div id="backdrop" part="backdrop" hidden></div>
|
|
71
|
+
<div part="overlay" id="overlay">
|
|
72
|
+
<div part="content" id="content"><slot></slot></div>
|
|
73
|
+
</div>
|
|
74
|
+
`;
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
static get properties() {
|
package/src/vaadin-tooltip.d.ts
CHANGED
|
@@ -78,6 +78,12 @@ declare class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(
|
|
|
78
78
|
*/
|
|
79
79
|
static setDefaultHoverDelay(delay: number): void;
|
|
80
80
|
|
|
81
|
+
/**
|
|
82
|
+
* Element used to link with the `aria-describedby`
|
|
83
|
+
* attribute. When not set, defaults to `target`.
|
|
84
|
+
*/
|
|
85
|
+
ariaTarget: HTMLElement | undefined;
|
|
86
|
+
|
|
81
87
|
/**
|
|
82
88
|
* Object with properties passed to `generator` and
|
|
83
89
|
* `shouldShow` functions for generating tooltip text
|
package/src/vaadin-tooltip.js
CHANGED
|
@@ -69,6 +69,14 @@ class TooltipStateController {
|
|
|
69
69
|
return tooltip.hideDelay != null && tooltip.hideDelay > 0 ? tooltip.hideDelay : defaultHideDelay;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
+
/**
|
|
73
|
+
* Whether closing is currently in progress.
|
|
74
|
+
* @return {boolean}
|
|
75
|
+
*/
|
|
76
|
+
get isClosing() {
|
|
77
|
+
return closing.has(this.host);
|
|
78
|
+
}
|
|
79
|
+
|
|
72
80
|
/**
|
|
73
81
|
* Schedule opening the tooltip.
|
|
74
82
|
* @param {Object} options
|
|
@@ -273,6 +281,7 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
|
|
|
273
281
|
no-vertical-overlap$="[[__computeNoVerticalOverlap(__effectivePosition)]]"
|
|
274
282
|
horizontal-align="[[__computeHorizontalAlign(__effectivePosition)]]"
|
|
275
283
|
vertical-align="[[__computeVerticalAlign(__effectivePosition)]]"
|
|
284
|
+
on-mouseenter="__onOverlayMouseEnter"
|
|
276
285
|
on-mouseleave="__onOverlayMouseLeave"
|
|
277
286
|
modeless
|
|
278
287
|
></vaadin-tooltip-overlay>
|
|
@@ -281,6 +290,14 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
|
|
|
281
290
|
|
|
282
291
|
static get properties() {
|
|
283
292
|
return {
|
|
293
|
+
/**
|
|
294
|
+
* Element used to link with the `aria-describedby`
|
|
295
|
+
* attribute. When not set, defaults to `target`.
|
|
296
|
+
*/
|
|
297
|
+
ariaTarget: {
|
|
298
|
+
type: Object,
|
|
299
|
+
},
|
|
300
|
+
|
|
284
301
|
/**
|
|
285
302
|
* Object with properties passed to `generator` and
|
|
286
303
|
* `shouldShow` functions for generating tooltip text
|
|
@@ -420,6 +437,17 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
|
|
|
420
437
|
value: 'bottom',
|
|
421
438
|
},
|
|
422
439
|
|
|
440
|
+
/**
|
|
441
|
+
* Element used to link with the `aria-describedby`
|
|
442
|
+
* attribute. When not set, defaults to `target`.
|
|
443
|
+
* @protected
|
|
444
|
+
*/
|
|
445
|
+
_effectiveAriaTarget: {
|
|
446
|
+
type: Object,
|
|
447
|
+
computed: '__computeAriaTarget(ariaTarget, target)',
|
|
448
|
+
observer: '__effectiveAriaTargetChanged',
|
|
449
|
+
},
|
|
450
|
+
|
|
423
451
|
/** @private */
|
|
424
452
|
__effectivePosition: {
|
|
425
453
|
type: String,
|
|
@@ -518,6 +546,11 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
|
|
|
518
546
|
document.body.removeEventListener('vaadin-overlay-open', this.__onOverlayOpen);
|
|
519
547
|
}
|
|
520
548
|
|
|
549
|
+
/** @private */
|
|
550
|
+
__computeAriaTarget(ariaTarget, target) {
|
|
551
|
+
return ariaTarget || target;
|
|
552
|
+
}
|
|
553
|
+
|
|
521
554
|
/** @private */
|
|
522
555
|
__computeHorizontalAlign(position) {
|
|
523
556
|
return ['top-end', 'bottom-end', 'start-top', 'start', 'start-bottom'].includes(position) ? 'end' : 'start';
|
|
@@ -553,6 +586,17 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
|
|
|
553
586
|
root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
|
|
554
587
|
}
|
|
555
588
|
|
|
589
|
+
/** @private */
|
|
590
|
+
__effectiveAriaTargetChanged(ariaTarget, oldAriaTarget) {
|
|
591
|
+
if (oldAriaTarget) {
|
|
592
|
+
removeValueFromAttribute(oldAriaTarget, 'aria-describedby', this._uniqueId);
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
if (ariaTarget) {
|
|
596
|
+
addValueToAttribute(ariaTarget, 'aria-describedby', this._uniqueId);
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
|
|
556
600
|
/** @private */
|
|
557
601
|
__autoOpenedChanged(opened, oldOpened) {
|
|
558
602
|
if (opened) {
|
|
@@ -596,8 +640,6 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
|
|
|
596
640
|
oldTarget.removeEventListener('mousedown', this.__onMouseDown);
|
|
597
641
|
|
|
598
642
|
this.__targetVisibilityObserver.unobserve(oldTarget);
|
|
599
|
-
|
|
600
|
-
removeValueFromAttribute(oldTarget, 'aria-describedby', this._uniqueId);
|
|
601
643
|
}
|
|
602
644
|
|
|
603
645
|
if (target) {
|
|
@@ -611,8 +653,6 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
|
|
|
611
653
|
requestAnimationFrame(() => {
|
|
612
654
|
this.__targetVisibilityObserver.observe(target);
|
|
613
655
|
});
|
|
614
|
-
|
|
615
|
-
addValueToAttribute(target, 'aria-describedby', this._uniqueId);
|
|
616
656
|
}
|
|
617
657
|
}
|
|
618
658
|
|
|
@@ -703,6 +743,17 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
|
|
|
703
743
|
}
|
|
704
744
|
}
|
|
705
745
|
|
|
746
|
+
/** @private */
|
|
747
|
+
__onOverlayMouseEnter() {
|
|
748
|
+
// Retain opened state when moving pointer over the overlay.
|
|
749
|
+
// Closing can start due to an offset between the target and
|
|
750
|
+
// the overlay itself. If that's the case, re-open overlay.
|
|
751
|
+
// See https://github.com/vaadin/web-components/issues/6316
|
|
752
|
+
if (this._stateController.isClosing) {
|
|
753
|
+
this._stateController.open({ immediate: true });
|
|
754
|
+
}
|
|
755
|
+
}
|
|
756
|
+
|
|
706
757
|
/** @private */
|
|
707
758
|
__onOverlayMouseLeave(event) {
|
|
708
759
|
if (event.relatedTarget !== this.target) {
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/tooltip",
|
|
4
|
-
"version": "24.
|
|
4
|
+
"version": "24.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-tooltip",
|
|
11
|
-
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
11
|
+
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha10/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top` | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start` | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end` | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "overlay-class",
|
|
@@ -134,6 +134,17 @@
|
|
|
134
134
|
]
|
|
135
135
|
}
|
|
136
136
|
},
|
|
137
|
+
{
|
|
138
|
+
"name": "ariaTarget",
|
|
139
|
+
"description": "Element used to link with the `aria-describedby`\nattribute. When not set, defaults to `target`.",
|
|
140
|
+
"value": {
|
|
141
|
+
"type": [
|
|
142
|
+
"Object",
|
|
143
|
+
"null",
|
|
144
|
+
"undefined"
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
},
|
|
137
148
|
{
|
|
138
149
|
"name": "context",
|
|
139
150
|
"description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/tooltip",
|
|
4
|
-
"version": "24.
|
|
4
|
+
"version": "24.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-tooltip",
|
|
19
|
-
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
19
|
+
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha10/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top` | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start` | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end` | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -40,6 +40,13 @@
|
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
|
+
{
|
|
44
|
+
"name": ".ariaTarget",
|
|
45
|
+
"description": "Element used to link with the `aria-describedby`\nattribute. When not set, defaults to `target`.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
43
50
|
{
|
|
44
51
|
"name": ".context",
|
|
45
52
|
"description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
|