59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
import { css, html, LitElement } from '@lion/core';
|
|
|
|
export class LionTooltipArrow extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
placement: { type: String, reflect: true },
|
|
};
|
|
}
|
|
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
position: absolute;
|
|
--tooltip-arrow-width: 12px;
|
|
--tooltip-arrow-height: 8px;
|
|
width: var(--tooltip-arrow-width);
|
|
height: var(--tooltip-arrow-height);
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none;
|
|
}
|
|
|
|
:host svg {
|
|
display: block;
|
|
}
|
|
|
|
:host([placement^='bottom']) {
|
|
top: calc(-1 * var(--tooltip-arrow-height));
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
:host([placement^='left']) {
|
|
right: calc(
|
|
-1 * (var(--tooltip-arrow-height) +
|
|
(var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
|
|
);
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
:host([placement^='right']) {
|
|
left: calc(
|
|
-1 * (var(--tooltip-arrow-height) +
|
|
(var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
|
|
);
|
|
transform: rotate(90deg);
|
|
}
|
|
`;
|
|
}
|
|
|
|
/* IE11 will not render the arrow without this method. */
|
|
render() {
|
|
return html`
|
|
<svg viewBox="0 0 12 8">
|
|
<path d="M 0,0 h 12 L 6,8 z"></path>
|
|
</svg>
|
|
`;
|
|
}
|
|
}
|