82 lines
2 KiB
JavaScript
82 lines
2 KiB
JavaScript
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';
|
|
}
|
|
|
|
/**
|
|
* // TODO: check if this is a false positive or if we can improve
|
|
* @configure ReactiveElement
|
|
*/
|
|
static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
|
|
|
|
/** @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 || []),
|
|
],
|
|
},
|
|
});
|
|
}
|
|
}
|