{
+ static defaultProps = defaultProps as object;
+
+ @observable.ref elem: HTMLDivElement | null = null;
+
+ @observable activePosition?: TooltipPosition;
+
+ @observable isVisible = false;
+
+ @observable isContentVisible = false; // animation manager
+
+ constructor(props: TooltipProps & typeof defaultProps) {
+ super(props);
+ makeObservable(this);
+ autoBindReact(this);
+ }
+
+ get targetElem(): HTMLElement | null {
+ return document.getElementById(this.props.targetId);
+ }
+
+ get hoverTarget(): HTMLElement | null {
+ if (this.props.tooltipOnParentHover) {
+ return this.targetElem?.parentElement ?? null;
+ }
+
+ return this.targetElem;
+ }
+
+ componentDidMount() {
+ this.hoverTarget?.addEventListener("mouseenter", this.onEnterTarget);
+ this.hoverTarget?.addEventListener("mouseleave", this.onLeaveTarget);
+ this.refreshPosition();
+ }
+
+ componentDidUpdate() {
+ this.refreshPosition();
+ }
+
+ componentWillUnmount() {
+ this.hoverTarget?.removeEventListener("mouseenter", this.onEnterTarget);
+ this.hoverTarget?.removeEventListener("mouseleave", this.onLeaveTarget);
+ }
+
+ @action
+ protected onEnterTarget() {
+ this.isVisible = true;
+ requestAnimationFrame(action(() => (this.isContentVisible = true)));
+ }
+
+ @action
+ protected onLeaveTarget() {
+ this.isVisible = false;
+ this.isContentVisible = false;
+ }
+
+ refreshPosition() {
+ const { preferredPositions, offset } = this.props;
+ const { elem, targetElem } = this;
+
+ if (!elem || !targetElem) {
+ return;
+ }
+
+ this.setPosition(elem, { left: 0, top: 0 });
+
+ const { position, ...location } = computeNextPosition({
+ offset,
+ preferredPositions,
+ target: targetElem,
+ tooltip: elem,
+ });
+
+ runInAction(() => {
+ this.activePosition = position;
+ this.setPosition(elem, location);
+ });
+ }
+
+ protected setPosition(elem: HTMLDivElement, pos: { left: number; top: number }) {
+ elem.style.left = `${pos.left}px`;
+ elem.style.top = `${pos.top}px`;
+ }
+
+ render() {
+ const { style, formatters, usePortal, children, visible = this.isVisible } = this.props;
+
+ if (!visible) {
+ return null;
+ }
+
+ const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
+ visible: this.isContentVisible || this.props.visible,
+ formatter: !!formatters,
+ });
+ const tooltip = (
+ (this.elem = elem)}
+ role="tooltip"
+ data-testid={this.props["data-testid"]}
+ >
+ {children}
+
+ );
+
+ if (usePortal) {
+ return createPortal(tooltip, document.body);
+ }
+
+ return tooltip;
+ }
+}
+
+export const Tooltip = DefaultedTooltip as React.ComponentClass;
diff --git a/packages/ui-components/tooltip/src/withTooltip.tsx b/packages/ui-components/tooltip/src/withTooltip.tsx
new file mode 100644
index 0000000000..819b4b1bd4
--- /dev/null
+++ b/packages/ui-components/tooltip/src/withTooltip.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { ReactNode } from "react";
+import React, { useState } from "react";
+import type { TooltipProps } from "./tooltip";
+import { Tooltip } from "./tooltip";
+import { isReactNode } from "@k8slens/utilities";
+import uniqueId from "lodash/uniqueId";
+import type { SingleOrMany } from "@k8slens/utilities";
+
+export interface TooltipDecoratorProps {
+ tooltip?: ReactNode | Omit;
+ /**
+ * forces tooltip to detect the target's parent for mouse events. This is
+ * useful for displaying tooltips even when the target is "disabled"
+ */
+ tooltipOverrideDisabled?: boolean;
+ id?: string;
+ children?: SingleOrMany;
+}
+
+export function withTooltip(
+ Target: TargetProps extends Pick
+ ? React.FunctionComponent
+ : never,
+): React.FunctionComponent {
+ const DecoratedComponent = (props: TargetProps & TooltipDecoratorProps) => {
+ // TODO: Remove side-effect to allow deterministic unit testing
+ const [defaultTooltipId] = useState(uniqueId("tooltip_target_"));
+
+ let { id: targetId, children: targetChildren } = props;
+ const {
+ tooltip,
+ tooltipOverrideDisabled,
+ id: _unusedId,
+ children: _unusedTargetChildren,
+ ...targetProps
+ } = props;
+
+ if (tooltip) {
+ const tooltipProps: TooltipProps = {
+ targetId: targetId || defaultTooltipId,
+ tooltipOnParentHover: tooltipOverrideDisabled,
+ formatters: { narrow: true },
+ ...(isReactNode(tooltip) ? { children: tooltip } : tooltip),
+ };
+
+ targetId = tooltipProps.targetId;
+ targetChildren = (
+ <>
+ {targetChildren}
+
+
+ );
+ }
+
+ return (
+
+ {targetChildren}
+
+ );
+ };
+
+ DecoratedComponent.displayName = `withTooltip(${Target.displayName || Target.name})`;
+
+ return DecoratedComponent;
+}
diff --git a/packages/ui-components/tooltip/tsconfig.json b/packages/ui-components/tooltip/tsconfig.json
new file mode 100644
index 0000000000..9e140d79da
--- /dev/null
+++ b/packages/ui-components/tooltip/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "extends": "@k8slens/typescript/config/base.json",
+ "include": ["**/*.ts", "**/*.tsx"],
+}
diff --git a/packages/ui-components/tooltip/webpack.config.js b/packages/ui-components/tooltip/webpack.config.js
new file mode 100644
index 0000000000..1cda407f5a
--- /dev/null
+++ b/packages/ui-components/tooltip/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;