HelpTooltip Component

HelpTooltip

This component provides HelpTooltip functionality.

Props

• prop1: Description of prop1.
• prop2: Description of prop2.

Usage

import { HelpTooltip } from './HelpTooltip';

const props = {};

<HelpTooltip prop1="value1" prop2="value2" />;

import 'tippy.js/dist/tippy.css';

import { InformationCircleIcon } from '@heroicons/react/24/outline';
import Tippy from '@tippyjs/react';
import type { FC, ReactNode } from 'react';

interface HelpTooltipProps {
  children: ReactNode;
}

const HelpTooltip: FC<HelpTooltipProps> = ({ children }) => {
  if (!children) {
    return null;
  }

  return (
    <Tippy
      placement="top"
      duration={0}
      className="!rounded-xl p-2.5 !leading-5 tracking-wide shadow-lg"
      content={<span>{children}</span>}
    >
      <span>
        <InformationCircleIcon className="lt-text-gray-500 h-[15px] w-[15px]" />
      </span>
    </Tippy>
  );
};

export default HelpTooltip;