phoenix-components-library/react/components/Tooltip/Tooltip.jsx

Component library for Phoenix Frontend Projects.

import React from "react";
import PropTypes from "prop-types";
import { Tooltip as AntTooltip } from "antd";

import "./Tooltip-antd.css";
import "./Tooltip.css";

const propTypes = {
  placement: PropTypes.string,
  title: PropTypes.string
};

const defaultProps = {
  placement: "top",
  title: ""
};

const Tooltip = props => {
  const { placement, title, children } = props;

  const tooltipOptions = [
    "topLeft",
    "top",
    "topRight",
    "leftTop",
    "left",
    "leftBottom",
    "rightTop",
    "right",
    "rightBottom",
    "bottomLeft",
    "bottom",
    "bottomRight"
  ];
  if (tooltipOptions.includes(placement)) {
    console.log("true");

    return (
      <AntTooltip placement={placement} title={title}>
        {children}
      </AntTooltip>
    );
  }
  console.log("false");
  return <AntTooltip title={title}>{children}</AntTooltip>;
};

Tooltip.propTypes = propTypes;
Tooltip.defaultProps = defaultProps;

export { Tooltip };