github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/TimelineChart/TooltipWrapper/index.tsx (about)

     1  import React, { useMemo } from 'react';
     2  import classNames from 'classnames/bind';
     3  import styles from './styles.module.scss';
     4  
     5  const cx = classNames.bind(styles);
     6  
     7  const EXPLORE_TOOLTIP_WRAPPER_ID = 'explore_tooltip_wrapper';
     8  
     9  export interface ITooltipWrapperProps {
    10    pageX: number;
    11    pageY: number;
    12    align: 'left' | 'right';
    13    children: React.ReactNode | React.ReactNode[];
    14    className?: string;
    15  }
    16  
    17  const TooltipWrapper = ({
    18    className,
    19    pageX,
    20    pageY,
    21    align,
    22    children,
    23  }: ITooltipWrapperProps) => {
    24    const isHidden = useMemo(() => pageX < 0 || pageY < 0, [pageX, pageY]);
    25  
    26    const style =
    27      align === 'right'
    28        ? { top: pageY, left: pageX + 20, right: 'auto' }
    29        : { top: pageY, left: 'auto', right: window.innerWidth - (pageX - 20) };
    30  
    31    return (
    32      <div
    33        style={style}
    34        className={cx({
    35          [styles.tooltip]: true,
    36          [styles.hidden]: isHidden,
    37          [className || '']: className,
    38        })}
    39        id={EXPLORE_TOOLTIP_WRAPPER_ID}
    40      >
    41        {children}
    42      </div>
    43    );
    44  };
    45  
    46  export default TooltipWrapper;