/
LionTooltip.js
76 lines (69 loc) · 1.83 KB
/
LionTooltip.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import { css, LitElement } from 'lit';
import { ArrowMixin, OverlayMixin, withTooltipConfig } from '@lion/ui/overlays.js';
/**
* @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
* @typedef {import('lit').CSSResult} CSSResult
* @typedef {import('lit').CSSResultArray} CSSResultArray
*/
/**
* @customElement lion-tooltip
*/
export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
/** @type {any} */
static get properties() {
return {
invokerRelation: {
type: String,
attribute: 'invoker-relation',
},
};
}
static get styles() {
return [
...super.styles,
css`
:host {
display: inline-block;
}
:host([hidden]) {
display: none;
}
::slotted([slot='content']) {
width: max-content;
}
`,
];
}
constructor() {
super();
/**
* Whether an arrow should be displayed
* @type {boolean}
*/
this.hasArrow = false;
/**
* Decides whether the tooltip invoker text should be considered a description
* (sets aria-describedby) or a label (sets aria-labelledby).
* @type {'label'|'description'}
*/
this.invokerRelation = 'description';
}
/** @protected */
// eslint-disable-next-line class-methods-use-this
_defineOverlayConfig() {
const superCfg = super._defineOverlayConfig();
const tooltipCfg = withTooltipConfig({ invokerRelation: this.invokerRelation });
return /** @type {OverlayConfig} */ ({
...superCfg,
...tooltipCfg,
popperConfig: {
...(superCfg.popperConfig || {}),
...(tooltipCfg.popperConfig || {}),
modifiers: [
...(superCfg.popperConfig?.modifiers || []),
...(tooltipCfg.popperConfig?.modifiers || []),
],
},
});
}
}