Tooltip arrow.

[ArtemFedorchuk]

I've tried to create the tooltip with the arrow without using react-area-components and I've not found any examples of this( only for the popover

The documentation for this useOverlayPosition is so small(

Could you help me with it, and add some examples to the documentation?
Currently, the main issue with the arrow when I chose placement: 'top'

My component:

import {
  CSSProperties,
  ElementType,
  FC,
  forwardRef,
  ReactNode,
  useRef,
  AriaAttributes,
  DOMAttributes as ReactDOMAttributes,
  AriaRole,
} from 'react';
import styled, { css } from 'styled-components';
import { useTooltipTriggerState, TooltipTriggerState } from 'react-stately';
import {
  mergeProps,
  useTooltip,
  useTooltipTrigger,
  useOverlayPosition,
  OverlayContainer,
  AriaTooltipProps,
  AriaPositionProps,
  TooltipTriggerProps,
} from 'react-aria';

import { themeColor } from '@baobab/theme';

import { RenderWhen } from '../../misc';
import { Body } from '../../typography';
import { Box, Flex } from '../../layout';

import { TooltipType, TooltipPlacement } from './tooltip.config';

interface BasicTooltipProps {
  type?: TooltipType;
  placement?: TooltipPlacement;
  arrow?: boolean;
  zIndex?: number;
}

const StyledTooltip = styled(Box)<BasicTooltipProps>`
  padding: 8px 12px;
  pointer-events: none;
  animation: fade 0.2s ease-in-out;
  z-index: ${({ zIndex }) => (zIndex ? zIndex : 'auto')};

  ${({ placement, type }) => css`
    max-width: ${placement === 'left' || placement === 'right' ? 321 : 327}px;
    height: ${type === 'simple' ? '36px' : 'auto'};
    white-space: ${type === 'simple' ? 'nowrap' : 'normal'};
  `}

  @keyframes fade {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
`;

const TooltipText = styled(Body)`
  overflow: hidden;
  text-overflow: ellipsis;
`;

const Arrow = styled.svg<Pick<AriaPositionProps, 'placement'>>`
  position: absolute;
  ${themeColor('gray.700')}

  &[data-placement='top'] {
    top: 100%;
    transform: translate(-50%);
  }

  &[data-placement='bottom'] {
    bottom: 100%;
    transform: translate(-50%) rotate(180deg);
  }

  &[data-placement='left'] {
    left: 100%;
    transform: translateY(-50%) rotate(-90deg);
  }

  &[data-placement='right'] {
    right: 100%;
    transform: translateY(-50%) rotate(90deg);
  }
`;

export interface FocusableElement extends Element, HTMLOrSVGElement {}

export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, ReactDOMAttributes<T> {
  id?: string | undefined;
  role?: AriaRole | undefined;
  tabIndex?: number | undefined;
  style?: CSSProperties | undefined;
  className?: string | undefined;
}

interface TooltipViewProps extends BasicTooltipProps, AriaTooltipProps {
  children: ReactNode;
  state: TooltipTriggerState;
  arrowProps: DOMAttributes;
}

const TooltipView = forwardRef<HTMLDivElement, TooltipViewProps>(
  ({ children, state, type, zIndex, arrow, arrowProps, ...rest }, ref) => {
    const { tooltipProps } = useTooltip(rest, state);

    console.log(arrowProps);

    return (
      <StyledTooltip
        width="max-content"
        borderRadius="s"
        backgroundColor="gray.700"
        color="neutral.white"
        ref={ref}
        type={type}
        zIndex={zIndex}
        placement={rest.placement}
        {...mergeProps(rest, tooltipProps)}
      >
        <RenderWhen condition={arrow}>
          <Arrow
            width="12"
            height="12"
            viewBox="0 0 12 12"
            data-placement={rest.placement}
            {...arrowProps}
          >
            <path d="M0 0,L6 6,L12 0" />
          </Arrow>
        </RenderWhen>
        <TooltipText color="inherit" size="xs">
          {children}
        </TooltipText>
      </StyledTooltip>
    );
  },
);

export interface TooltipProps
  extends BasicTooltipProps,
    AriaTooltipProps,
    TooltipTriggerProps,
    Omit<AriaPositionProps, 'placement' | 'targetRef' | 'overlayRef'> {
  children: ReactNode;
  arrow?: boolean;
  text: string;
  wrap?: ElementType;
}

export const Tooltip: FC<TooltipProps> = ({
  children,
  type = 'simple',
  placement = 'top',
  arrow = false,
  text,
  wrap = Flex,
  zIndex,
  ...rest
}) => {
  const state = useTooltipTriggerState({ ...rest, delay: 0, isOpen: true });
  const triggerRef = useRef(null);
  const overlayRef = useRef(null);

  // Get props for the trigger and its tooltip
  const { triggerProps, tooltipProps } = useTooltipTrigger(rest, state, triggerRef);

  // Get popover positioning props relative to the trigger
  const { overlayProps, arrowProps } = useOverlayPosition({
    targetRef: triggerRef,
    overlayRef,
    placement,
    offset: 8,
    arrowSize: 12,
    isOpen: state.isOpen,
  });

  return (
    <>
      <Box ref={triggerRef} as={wrap} {...triggerProps}>
        {children}
      </Box>

      <RenderWhen condition={state.isOpen}>
        <OverlayContainer>
          <TooltipView
            {...rest}
            ref={overlayRef}
            state={state}
            placement={placement}
            type={type}
            zIndex={zIndex}
            arrow={arrow}
            arrowProps={arrowProps}
            {...overlayProps}
            {...tooltipProps}
          >
            {text}
          </TooltipView>
        </OverlayContainer>
      </RenderWhen>
    </>
  );
};

[jucian0]

I've created an example, I can share with you.

You can update this example to fit your requirements.

import { useTooltipTriggerState } from "react-stately";
import {
  TooltipTriggerProps,
  mergeProps,
  useTooltip,
  useTooltipTrigger,
  Placement,
  useOverlayPosition,
} from "react-aria";
import React from "react";

function TooltipContent({ state, ...props }: any) {
  const { tooltipProps } = useTooltip(props, state);

  let overlayRef = React.useRef<HTMLDivElement>(null);
  let { overlayProps, arrowProps, placement } = useOverlayPosition({
    placement: props.placement || "top",
    targetRef: props.triggerRef,
    overlayRef,
    offset: 8,
    crossOffset: 0,
    isOpen: state.isOpen,
  });

  return (
    <div className="tooltip-content"
      {...mergeProps(props, tooltipProps)}
      ref={overlayRef}
    >
      <div className="arrow" {...arrowProps} data-placement={placement}>
        <path d="M0 20C0 20 2.06906 19.9829 5.91817 15.4092C7.49986 13.5236 8.97939 12.3809 10.0002 12.3809C11.0202 12.3809 12.481 13.6451 14.0814 15.5472C17.952 20.1437 20 20 20 20H0Z" />
      </div>
      {props.children}
    </div>
  );
}

export interface TooltipProps extends TooltipTriggerProps {
  delay?: number;
  closeDelay?: number;
  children: React.ReactNode;
  content: React.ReactNode;
  placement: Placement;
}

export function Tooltip({
  delay = 0,
  closeDelay = 0,
  children,
  ...props
}: TooltipProps) {
  const ref = React.useRef(null);
  const state = useTooltipTriggerState({ ...props, delay, closeDelay });
  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, ref);

  return (
    <>
      {React.isValidElement(children) &&
        React.cloneElement<any>(children, {
          ref,
          ...triggerProps,
        })}
        {state.isOpen && (
          <TooltipContent
            state={state}
            {...mergeProps(tooltipProps, props)}
            triggerRef={ref}
          >
            <div>{props.content}</div>
          </TooltipContent>
        )}
    </>
  );
}


examples:

<Tooltip content="Click me" placement="bottom"><Button>Click me</Button></Tooltip>