@parkassist/pa-ui-library/dist/components/Tooltip/index.js

INX Platform elements

var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import Tooltip from '@mui/material/Tooltip';
import Palette from "../../constants/Palette";
import { FontStyles } from "../../index";
const CustomTooltip = _a => {
  var {
      backgroundColor = Palette.LIGHT_BLACK,
      content = "",
      children,
      placement = "bottom",
      contentStyles,
      border = false
    } = _a,
    props = __rest(_a, ["backgroundColor", "content", "children", "placement", "contentStyles", "border"]);
  const borderStyle = border ? {
    border: `1px solid ${Palette.DIM_GREY}`,
    backgroundColor
  } : {};
  return _jsx(Tooltip, Object.assign({}, props, {
    title: content,
    placement: placement,
    arrow: !border,
    PopperProps: {
      sx: {
        zIndex: 9999,
        '& .MuiTooltip-tooltip': Object.assign({
          fontSize: FontStyles.BODY3_FONT
        }, borderStyle),
        '& .MuiTooltip-tooltipArrow': {
          backgroundColor: backgroundColor
        },
        '& .MuiTooltip-arrow': {
          color: backgroundColor
        }
      }
    },
    children: _jsx("span", {
      style: Object.assign({}, contentStyles),
      children: children
    })
  }));
};
export default CustomTooltip;