import { useMemo } from 'react';
  import PortalTooltip from '@telenko/portal-tooltip';

  const Example: React.FC = () => {
      const container = useMemo(() => document.getElementById('hover-container'), []);

      return <PortalTooltip container={container}>
        <div>I'm a contents inside a tooltip :) You can use any React components here.</div>
      </PortalTooltip>
  };

  //left to cursor
  <PortalTooltip container={container} direction='left'>...</PortalTooltip>
  //right to cursor
  <PortalTooltip container={container} direction='right'>...</PortalTooltip>
  //top to cursor
  <PortalTooltip container={container} direction='top'>...</PortalTooltip>
  //bottom to cursor
  <PortalTooltip container={container} direction='bottom'>...</PortalTooltip>
  //manual position
  <PortalTooltip container={container} dx={20} dy={-200}>...</PortalTooltip>
  //mixed position
  <PortalTooltip container={container} direction='right' dx={20}>...</PortalTooltip>