import React from "react";
import cx from "classnames";
import * as RadixTooltip from "@radix-ui/react-tooltip";
import createComponent from "../../system/createComponent";
import getClasses from "./styles";
var Tooltip = /*#__PURE__*/React.forwardRef(function (props) {
  var classes = getClasses();
  var title = props.title,
      children = props.children,
      className = props.className,
      position = props.position,
      _props$delayDuration = props.delayDuration,
      delayDuration = _props$delayDuration === void 0 ? 700 : _props$delayDuration,
      open = props.open,
      _props$arrow = props.arrow,
      arrow = _props$arrow === void 0 ? true : _props$arrow,
      align = props.align,
      asChild = props.asChild,
      onClickOutside = props.onClickOutside;
  return /*#__PURE__*/React.createElement(RadixTooltip.Provider, {
    delayDuration: delayDuration
  }, /*#__PURE__*/React.createElement(RadixTooltip.Root, {
    open: open
  }, /*#__PURE__*/React.createElement(RadixTooltip.Trigger, {
    asChild: asChild,
    className: classes.tooltipTrigger
  }, /*#__PURE__*/React.createElement("span", null, children)), /*#__PURE__*/React.createElement(RadixTooltip.Portal, null, /*#__PURE__*/React.createElement(RadixTooltip.Content, {
    asChild: true,
    sideOffset: 4,
    side: position,
    align: align,
    onPointerDownOutside: onClickOutside
  }, /*#__PURE__*/React.createElement("div", {
    className: cx(classes.tooltipContent, className)
  }, title, arrow && /*#__PURE__*/React.createElement(RadixTooltip.Arrow, {
    className: classes.tooltipArrow
  }))))));
});

if (process.env.NODE_ENV !== "production") {
  Tooltip.displayName = "LabTooltip";
}

var StyledTooltip = createComponent(Tooltip);
export default StyledTooltip;