@vaadin/tooltip 25.0.0-alpha1 → 25.0.0-alpha11
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 +11 -12
- package/src/styles/vaadin-tooltip-overlay-base-styles.js +59 -0
- package/src/vaadin-tooltip-mixin.js +16 -56
- package/src/vaadin-tooltip-overlay.js +6 -19
- package/src/vaadin-tooltip.d.ts +5 -7
- package/src/vaadin-tooltip.js +8 -11
- package/vaadin-tooltip.js +1 -1
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
- package/src/vaadin-tooltip-overlay-styles.js +0 -42
- package/theme/lumo/vaadin-tooltip-styles.d.ts +0 -3
- package/theme/lumo/vaadin-tooltip-styles.js +0 -27
- package/theme/lumo/vaadin-tooltip.d.ts +0 -2
- package/theme/lumo/vaadin-tooltip.js +0 -2
- /package/src/{vaadin-tooltip-overlay-styles.d.ts → styles/vaadin-tooltip-overlay-base-styles.d.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/tooltip",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
-
"theme",
|
|
25
24
|
"vaadin-*.d.ts",
|
|
26
25
|
"vaadin-*.js",
|
|
27
26
|
"web-types.json",
|
|
@@ -35,23 +34,23 @@
|
|
|
35
34
|
],
|
|
36
35
|
"dependencies": {
|
|
37
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
39
|
-
"@vaadin/component-base": "25.0.0-
|
|
40
|
-
"@vaadin/overlay": "25.0.0-
|
|
41
|
-
"@vaadin/popover": "25.0.0-
|
|
42
|
-
"@vaadin/vaadin-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-alpha11",
|
|
38
|
+
"@vaadin/component-base": "25.0.0-alpha11",
|
|
39
|
+
"@vaadin/overlay": "25.0.0-alpha11",
|
|
40
|
+
"@vaadin/popover": "25.0.0-alpha11",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha11",
|
|
44
42
|
"lit": "^3.0.0"
|
|
45
43
|
},
|
|
46
44
|
"devDependencies": {
|
|
47
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
48
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
49
|
-
"@vaadin/testing-helpers": "^
|
|
45
|
+
"@vaadin/chai-plugins": "25.0.0-alpha11",
|
|
46
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha11",
|
|
47
|
+
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha11",
|
|
50
49
|
"sinon": "^18.0.0"
|
|
51
50
|
},
|
|
52
51
|
"web-types": [
|
|
53
52
|
"web-types.json",
|
|
54
53
|
"web-types.lit.json"
|
|
55
54
|
],
|
|
56
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
|
|
57
56
|
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2022 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
|
+
import { css } from 'lit';
|
|
8
|
+
|
|
9
|
+
export const tooltipOverlayStyles = css`
|
|
10
|
+
:host {
|
|
11
|
+
--_vaadin-tooltip-default-offset: 4px;
|
|
12
|
+
line-height: normal;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
[part='overlay'] {
|
|
16
|
+
max-width: var(--vaadin-tooltip-max-width, 40ch);
|
|
17
|
+
padding: var(--vaadin-tooltip-padding, var(--vaadin-padding-container));
|
|
18
|
+
border-radius: var(--vaadin-tooltip-border-radius, var(--vaadin-radius-m));
|
|
19
|
+
background: var(--vaadin-tooltip-background, var(--vaadin-background-color));
|
|
20
|
+
color: var(--vaadin-tooltip-color, inherit);
|
|
21
|
+
font-size: var(--vaadin-tooltip-font-size, 0.9em);
|
|
22
|
+
font-weight: var(--vaadin-tooltip-font-weight, inherit);
|
|
23
|
+
line-height: var(--vaadin-tooltip-line-height, inherit);
|
|
24
|
+
border: 0;
|
|
25
|
+
box-shadow:
|
|
26
|
+
0 0 0 var(--vaadin-tooltip-border-width, 1px) var(--vaadin-tooltip-border-color, var(--vaadin-border-color)),
|
|
27
|
+
var(--vaadin-tooltip-box-shadow, 0 3px 8px -1px rgba(0, 0, 0, 0.2));
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
[part='content'] {
|
|
31
|
+
white-space: pre-wrap;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:host([position^='top'][top-aligned]) [part='overlay'],
|
|
35
|
+
:host([position^='bottom'][top-aligned]) [part='overlay'] {
|
|
36
|
+
margin-top: var(--vaadin-tooltip-offset-top, var(--_vaadin-tooltip-default-offset));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([position^='top'][bottom-aligned]) [part='overlay'],
|
|
40
|
+
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
|
|
41
|
+
margin-bottom: var(--vaadin-tooltip-offset-bottom, var(--_vaadin-tooltip-default-offset));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:host([position^='start'][start-aligned]) [part='overlay'],
|
|
45
|
+
:host([position^='end'][start-aligned]) [part='overlay'] {
|
|
46
|
+
margin-inline-start: var(--vaadin-tooltip-offset-start, var(--_vaadin-tooltip-default-offset));
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:host([position^='start'][end-aligned]) [part='overlay'],
|
|
50
|
+
:host([position^='end'][end-aligned]) [part='overlay'] {
|
|
51
|
+
margin-inline-end: var(--vaadin-tooltip-offset-end, var(--_vaadin-tooltip-default-offset));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media (forced-colors: active) {
|
|
55
|
+
[part='overlay'] {
|
|
56
|
+
border: 1px dashed;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
`;
|
|
@@ -330,7 +330,6 @@ export const TooltipMixin = (superClass) =>
|
|
|
330
330
|
*/
|
|
331
331
|
text: {
|
|
332
332
|
type: String,
|
|
333
|
-
observer: '__textChanged',
|
|
334
333
|
},
|
|
335
334
|
|
|
336
335
|
/**
|
|
@@ -366,26 +365,9 @@ export const TooltipMixin = (superClass) =>
|
|
|
366
365
|
type: Boolean,
|
|
367
366
|
sync: true,
|
|
368
367
|
},
|
|
369
|
-
|
|
370
|
-
/** @private */
|
|
371
|
-
_srLabel: {
|
|
372
|
-
type: Object,
|
|
373
|
-
},
|
|
374
|
-
|
|
375
|
-
/** @private */
|
|
376
|
-
_overlayContent: {
|
|
377
|
-
type: String,
|
|
378
|
-
},
|
|
379
368
|
};
|
|
380
369
|
}
|
|
381
370
|
|
|
382
|
-
static get observers() {
|
|
383
|
-
return [
|
|
384
|
-
'__generatorChanged(_overlayElement, generator, context)',
|
|
385
|
-
'__updateSrLabelText(_srLabel, _overlayContent)',
|
|
386
|
-
];
|
|
387
|
-
}
|
|
388
|
-
|
|
389
371
|
/**
|
|
390
372
|
* Sets the default focus delay to be used by all tooltip instances,
|
|
391
373
|
* except for those that have focus delay configured using property.
|
|
@@ -420,7 +402,6 @@ export const TooltipMixin = (superClass) =>
|
|
|
420
402
|
super();
|
|
421
403
|
|
|
422
404
|
this._uniqueId = `vaadin-tooltip-${generateUniqueId()}`;
|
|
423
|
-
this._renderer = this.__tooltipRenderer.bind(this);
|
|
424
405
|
|
|
425
406
|
this.__onFocusin = this.__onFocusin.bind(this);
|
|
426
407
|
this.__onFocusout = this.__onFocusout.bind(this);
|
|
@@ -467,19 +448,24 @@ export const TooltipMixin = (superClass) =>
|
|
|
467
448
|
|
|
468
449
|
this._overlayElement = this.$.overlay;
|
|
469
450
|
|
|
470
|
-
this.
|
|
451
|
+
this.__contentController = new SlotController(this, 'overlay', 'div', {
|
|
471
452
|
initializer: (element) => {
|
|
472
453
|
element.id = this._uniqueId;
|
|
473
454
|
element.setAttribute('role', 'tooltip');
|
|
474
|
-
this.
|
|
455
|
+
this.__contentNode = element;
|
|
475
456
|
},
|
|
476
457
|
});
|
|
477
|
-
this.addController(this.
|
|
458
|
+
this.addController(this.__contentController);
|
|
478
459
|
}
|
|
479
460
|
|
|
480
|
-
/** @
|
|
481
|
-
|
|
482
|
-
|
|
461
|
+
/** @protected */
|
|
462
|
+
updated(props) {
|
|
463
|
+
super.updated(props);
|
|
464
|
+
|
|
465
|
+
if (props.has('text') || props.has('generator') || props.has('context')) {
|
|
466
|
+
this.__updateContent();
|
|
467
|
+
this.$.overlay.toggleAttribute('hidden', this.__contentNode.textContent.trim() === '');
|
|
468
|
+
}
|
|
483
469
|
}
|
|
484
470
|
|
|
485
471
|
/** @private */
|
|
@@ -617,6 +603,9 @@ export const TooltipMixin = (superClass) =>
|
|
|
617
603
|
|
|
618
604
|
/** @protected */
|
|
619
605
|
__onOverlayMouseEnter() {
|
|
606
|
+
if (this.manual) {
|
|
607
|
+
return;
|
|
608
|
+
}
|
|
620
609
|
// Retain opened state when moving pointer over the overlay.
|
|
621
610
|
// Closing can start due to an offset between the target and
|
|
622
611
|
// the overlay itself. If that's the case, re-open overlay.
|
|
@@ -685,18 +674,8 @@ export const TooltipMixin = (superClass) =>
|
|
|
685
674
|
}
|
|
686
675
|
|
|
687
676
|
/** @private */
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
this._overlayElement.requestContentUpdate();
|
|
691
|
-
}
|
|
692
|
-
}
|
|
693
|
-
|
|
694
|
-
/** @private */
|
|
695
|
-
__tooltipRenderer(root) {
|
|
696
|
-
root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
|
|
697
|
-
|
|
698
|
-
// Update the sr-only label text content
|
|
699
|
-
this._overlayContent = root.textContent;
|
|
677
|
+
__updateContent() {
|
|
678
|
+
this.__contentNode.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
|
|
700
679
|
}
|
|
701
680
|
|
|
702
681
|
/** @private */
|
|
@@ -720,23 +699,4 @@ export const TooltipMixin = (superClass) =>
|
|
|
720
699
|
});
|
|
721
700
|
}
|
|
722
701
|
}
|
|
723
|
-
|
|
724
|
-
/** @private */
|
|
725
|
-
__generatorChanged(overlayElement, generator, context) {
|
|
726
|
-
if (overlayElement) {
|
|
727
|
-
if (generator !== this.__oldTextGenerator || context !== this.__oldContext) {
|
|
728
|
-
overlayElement.requestContentUpdate();
|
|
729
|
-
}
|
|
730
|
-
|
|
731
|
-
this.__oldTextGenerator = generator;
|
|
732
|
-
this.__oldContext = context;
|
|
733
|
-
}
|
|
734
|
-
}
|
|
735
|
-
|
|
736
|
-
/** @private */
|
|
737
|
-
__updateSrLabelText(srLabel, textContent) {
|
|
738
|
-
if (srLabel) {
|
|
739
|
-
srLabel.textContent = textContent;
|
|
740
|
-
}
|
|
741
|
-
}
|
|
742
702
|
};
|
|
@@ -7,10 +7,11 @@ import { html, LitElement } from 'lit';
|
|
|
7
7
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
8
|
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
9
9
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
10
|
-
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
|
|
10
|
+
import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
|
|
11
11
|
import { PopoverOverlayMixin } from '@vaadin/popover/src/vaadin-popover-overlay-mixin.js';
|
|
12
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
12
13
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
|
-
import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
|
|
14
|
+
import { tooltipOverlayStyles } from './styles/vaadin-tooltip-overlay-base-styles.js';
|
|
14
15
|
|
|
15
16
|
/**
|
|
16
17
|
* An element used internally by `<vaadin-tooltip>`. Not intended to be used separately.
|
|
@@ -22,7 +23,9 @@ import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
|
|
|
22
23
|
* @mixes PopoverOverlayMixin
|
|
23
24
|
* @private
|
|
24
25
|
*/
|
|
25
|
-
class TooltipOverlay extends PopoverOverlayMixin(
|
|
26
|
+
class TooltipOverlay extends PopoverOverlayMixin(
|
|
27
|
+
DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
28
|
+
) {
|
|
26
29
|
static get is() {
|
|
27
30
|
return 'vaadin-tooltip-overlay';
|
|
28
31
|
}
|
|
@@ -31,30 +34,14 @@ class TooltipOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitM
|
|
|
31
34
|
return [overlayStyles, tooltipOverlayStyles];
|
|
32
35
|
}
|
|
33
36
|
|
|
34
|
-
/**
|
|
35
|
-
* Tag name prefix used by custom properties.
|
|
36
|
-
* @protected
|
|
37
|
-
* @return {string}
|
|
38
|
-
*/
|
|
39
|
-
get _tagNamePrefix() {
|
|
40
|
-
return 'vaadin-tooltip';
|
|
41
|
-
}
|
|
42
|
-
|
|
43
37
|
/** @protected */
|
|
44
38
|
render() {
|
|
45
39
|
return html`
|
|
46
|
-
<div id="backdrop" part="backdrop" hidden></div>
|
|
47
40
|
<div part="overlay" id="overlay">
|
|
48
41
|
<div part="content" id="content"><slot></slot></div>
|
|
49
42
|
</div>
|
|
50
43
|
`;
|
|
51
44
|
}
|
|
52
|
-
|
|
53
|
-
requestContentUpdate() {
|
|
54
|
-
super.requestContentUpdate();
|
|
55
|
-
|
|
56
|
-
this.toggleAttribute('hidden', this.textContent.trim() === '');
|
|
57
|
-
}
|
|
58
45
|
}
|
|
59
46
|
|
|
60
47
|
defineCustomElement(TooltipOverlay);
|
package/src/vaadin-tooltip.d.ts
CHANGED
|
@@ -19,11 +19,12 @@ export { TooltipPosition } from './vaadin-tooltip-mixin.js';
|
|
|
19
19
|
*
|
|
20
20
|
* ### Styling
|
|
21
21
|
*
|
|
22
|
-
*
|
|
23
|
-
* themable component as the actual visible overlay.
|
|
22
|
+
* The following shadow DOM parts are available for styling:
|
|
24
23
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
24
|
+
* Part name | Description
|
|
25
|
+
* ----------- | ---------------
|
|
26
|
+
* `overlay` | The overlay element
|
|
27
|
+
* `content` | The overlay content element
|
|
27
28
|
*
|
|
28
29
|
* The following state attributes are available for styling:
|
|
29
30
|
*
|
|
@@ -31,9 +32,6 @@ export { TooltipPosition } from './vaadin-tooltip-mixin.js';
|
|
|
31
32
|
* -----------------|----------------------------------------
|
|
32
33
|
* `position` | Reflects the `position` property value.
|
|
33
34
|
*
|
|
34
|
-
* Note: the `theme` attribute value set on `<vaadin-tooltip>` is
|
|
35
|
-
* propagated to the internal `<vaadin-tooltip-overlay>` component.
|
|
36
|
-
*
|
|
37
35
|
* ### Custom CSS Properties
|
|
38
36
|
*
|
|
39
37
|
* The following custom CSS properties are available on the `<vaadin-tooltip>` element:
|
package/src/vaadin-tooltip.js
CHANGED
|
@@ -22,11 +22,12 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
|
|
|
22
22
|
*
|
|
23
23
|
* ### Styling
|
|
24
24
|
*
|
|
25
|
-
*
|
|
26
|
-
* themable component as the actual visible overlay.
|
|
25
|
+
* The following shadow DOM parts are available for styling:
|
|
27
26
|
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
27
|
+
* Part name | Description
|
|
28
|
+
* ----------- | ---------------
|
|
29
|
+
* `overlay` | The overlay element
|
|
30
|
+
* `content` | The overlay content element
|
|
30
31
|
*
|
|
31
32
|
* The following state attributes are available for styling:
|
|
32
33
|
*
|
|
@@ -34,9 +35,6 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
|
|
|
34
35
|
* -----------------|----------------------------------------
|
|
35
36
|
* `position` | Reflects the `position` property value.
|
|
36
37
|
*
|
|
37
|
-
* Note: the `theme` attribute value set on `<vaadin-tooltip>` is
|
|
38
|
-
* propagated to the internal `<vaadin-tooltip-overlay>` component.
|
|
39
|
-
*
|
|
40
38
|
* ### Custom CSS Properties
|
|
41
39
|
*
|
|
42
40
|
* The following custom CSS properties are available on the `<vaadin-tooltip>` element:
|
|
@@ -64,7 +62,7 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
|
|
|
64
62
|
static get styles() {
|
|
65
63
|
return css`
|
|
66
64
|
:host {
|
|
67
|
-
display:
|
|
65
|
+
display: contents;
|
|
68
66
|
}
|
|
69
67
|
`;
|
|
70
68
|
}
|
|
@@ -76,7 +74,6 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
|
|
|
76
74
|
return html`
|
|
77
75
|
<vaadin-tooltip-overlay
|
|
78
76
|
id="overlay"
|
|
79
|
-
.renderer="${this._renderer}"
|
|
80
77
|
.owner="${this}"
|
|
81
78
|
theme="${ifDefined(this._theme)}"
|
|
82
79
|
.opened="${this._isConnected && (this.manual ? this.opened : this._autoOpened)}"
|
|
@@ -89,9 +86,9 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
|
|
|
89
86
|
@mouseenter="${this.__onOverlayMouseEnter}"
|
|
90
87
|
@mouseleave="${this.__onOverlayMouseLeave}"
|
|
91
88
|
modeless
|
|
89
|
+
exportparts="overlay, content"
|
|
90
|
+
><slot name="overlay"></slot
|
|
92
91
|
></vaadin-tooltip-overlay>
|
|
93
|
-
|
|
94
|
-
<slot name="sr-label"></slot>
|
|
95
92
|
`;
|
|
96
93
|
}
|
|
97
94
|
}
|
package/vaadin-tooltip.js
CHANGED
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": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha11",
|
|
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\
|
|
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\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------- | ---------------\n`overlay` | The overlay element\n`content` | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\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",
|
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": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha11",
|
|
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\
|
|
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\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------- | ---------------\n`overlay` | The overlay element\n`content` | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\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
|
{
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2022 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
7
|
-
|
|
8
|
-
export const tooltipOverlayStyles = css`
|
|
9
|
-
[part='overlay'] {
|
|
10
|
-
max-width: 40ch;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
[part='content'] {
|
|
14
|
-
white-space: pre-wrap;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:host([position^='top'][top-aligned]) [part='overlay'],
|
|
18
|
-
:host([position^='bottom'][top-aligned]) [part='overlay'] {
|
|
19
|
-
margin-top: var(--vaadin-tooltip-offset-top, 0);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
:host([position^='top'][bottom-aligned]) [part='overlay'],
|
|
23
|
-
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
|
|
24
|
-
margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:host([position^='start'][start-aligned]) [part='overlay'],
|
|
28
|
-
:host([position^='end'][start-aligned]) [part='overlay'] {
|
|
29
|
-
margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
:host([position^='start'][end-aligned]) [part='overlay'],
|
|
33
|
-
:host([position^='end'][end-aligned]) [part='overlay'] {
|
|
34
|
-
margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
@media (forced-colors: active) {
|
|
38
|
-
[part='overlay'] {
|
|
39
|
-
outline: 1px dashed;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
`;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
4
|
-
import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
|
|
5
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
6
|
-
|
|
7
|
-
const tooltipOverlay = css`
|
|
8
|
-
:host {
|
|
9
|
-
--vaadin-tooltip-offset-top: var(--lumo-space-xs);
|
|
10
|
-
--vaadin-tooltip-offset-bottom: var(--lumo-space-xs);
|
|
11
|
-
--vaadin-tooltip-offset-start: var(--lumo-space-xs);
|
|
12
|
-
--vaadin-tooltip-offset-end: var(--lumo-space-xs);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
[part='overlay'] {
|
|
16
|
-
background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
|
|
17
|
-
color: var(--lumo-body-text-color);
|
|
18
|
-
font-size: var(--lumo-font-size-xs);
|
|
19
|
-
line-height: var(--lumo-line-height-s);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
[part='content'] {
|
|
23
|
-
padding: var(--lumo-space-xs) var(--lumo-space-s);
|
|
24
|
-
}
|
|
25
|
-
`;
|
|
26
|
-
|
|
27
|
-
registerStyles('vaadin-tooltip-overlay', [overlay, tooltipOverlay], { moduleId: 'lumo-tooltip-overlay' });
|
/package/src/{vaadin-tooltip-overlay-styles.d.ts → styles/vaadin-tooltip-overlay-base-styles.d.ts}
RENAMED
|
File without changes
|