@helpwave/hightide/dist/components/Tooltip.mjs

helpwave's component and theming library

// src/hooks/useHoverState.ts
import { useEffect, useState } from "react";
var defaultUseHoverStateProps = {
  closingDelay: 200,
  isDisabled: false
};
var useHoverState = (props = void 0) => {
  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
  const [isHovered, setIsHovered] = useState(false);
  const [timer, setTimer] = useState();
  const onMouseEnter = () => {
    if (isDisabled) {
      return;
    }
    clearTimeout(timer);
    setIsHovered(true);
  };
  const onMouseLeave = () => {
    if (isDisabled) {
      return;
    }
    setTimer(setTimeout(() => {
      setIsHovered(false);
    }, closingDelay));
  };
  useEffect(() => {
    if (timer) {
      return () => {
        clearTimeout(timer);
      };
    }
  });
  useEffect(() => {
    if (timer) {
      clearTimeout(timer);
    }
  }, [isDisabled]);
  return {
    isHovered,
    setIsHovered,
    handlers: { onMouseEnter, onMouseLeave }
  };
};

// src/components/Tooltip.tsx
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
var Tooltip = ({
  tooltip,
  children,
  animationDelay = 650,
  tooltipClassName = "",
  containerClassName = "",
  position = "bottom",
  zIndex = 10
}) => {
  const { isHovered, handlers } = useHoverState();
  const positionClasses = {
    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
  };
  const triangleSize = 6;
  const triangleClasses = {
    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,
    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,
    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,
    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`
  };
  const triangleStyle = {
    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
  };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: clsx("relative inline-block", containerClassName),
      ...handlers,
      children: [
        children,
        isHovered && /* @__PURE__ */ jsxs(
          "div",
          {
            className: clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600
           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName),
            style: { zIndex, animationDelay: animationDelay + "ms" },
            children: [
              tooltip,
              /* @__PURE__ */ jsx(
                "div",
                {
                  className: clsx(`absolute w-0 h-0`, triangleClasses[position]),
                  style: { ...triangleStyle[position], zIndex }
                }
              )
            ]
          }
        )
      ]
    }
  );
};
export {
  Tooltip
};
//# sourceMappingURL=Tooltip.mjs.map