Tooltip

1import type { Placement } from "@floating-ui/dom";
2import { cva } from "class-variance-authority";
3import { css, html, LitElement, type PropertyValues } from "lit";
4import { customElement, property, query, state } from "lit/decorators.js";
5import { TW } from "@/lib/tailwindMixin";
6import { cn } from "@/lib/utils";
7import "../popover/popover";
8import type { Popover as PopupElement } from "../popover/popover";
9 
10const tooltipVariants = cva(
11  "max-w-80 z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
12  {
13    variants: {
14      placement: {
15        top: "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2",
16        bottom: "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2",
17        left: "animate-in fade-in-0 zoom-in-95 slide-in-from-right-2",
18        right: "animate-in fade-in-0 zoom-in-95 slide-in-from-left-2",
19      },
20    },
21  },
22);
23 
24export interface TooltipProperties {
25  content?: string;
26  placement?: Placement;
27  disabled?: boolean;
28  distance?: number;
29  open?: boolean;
30  skidding?: number;
31  trigger?: string;
32  hoist?: boolean;
33}
34 
35@customElement("ui-tooltip")
36export class Tooltip extends TW(LitElement) implements TooltipProperties {
37  @property() content = "";
38  @property() placement: Placement = "top";
39  @property({ type: Boolean, reflect: true }) disabled = false;
40  @property({ type: Number }) distance = 8;
41  @property({ type: Boolean, reflect: true }) open = false;
42  @property({ type: Number }) skidding = 0;
43  @property() trigger = "hover focus";
44  @property({ type: Boolean }) hoist = false;
45 
46  @query("ui-popover") private popup!: PopupElement;
47 
48  @state() private currentPlacement: Placement = "top";
49 
50  private hoverTimeout?: number;
51 
52  static styles = css`
53    :host {
54      display: inline-block;
55    }
56  `;
57 
58  constructor() {
59    super();
60    this.addEventListener("blur", this.handleBlur, true);
61    this.addEventListener("focus", this.handleFocus, true);
62    this.addEventListener("click", this.handleClick);
63    this.addEventListener("mouseenter", this.handleMouseEnter);
64    this.addEventListener("mouseleave", this.handleMouseLeave);
65    this.addEventListener("keydown", this.handleKeyDown);
66  }
67 
68  override disconnectedCallback() {
69    super.disconnectedCallback();
70    this.clearHoverTimeout();
71  }
72 
73  override firstUpdated() {
74    if (this.open && !this.disabled) {
75      this.popup.active = true;
76      this.popup.reposition();
77    }
78  }
79 
80// … truncated