# All files / src/Tooltip Tooltip.tsx

100% Statements 23/23
87.5% Branches 7/8
100% Functions 2/2
100% Lines 19/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    8340x
    40x
    40x
    40x

    40x
    13x
    13x

    40x

    182x
    182x
    182x
    182x
    182x
    182x

    182x

    182x

    40x

    40x

    40x

     import React from 'react'
    import { OverlayTrigger, OverlayTriggerProps } from '../OverlayTrigger'
    import { addSubcomponents } from '../_utils/addSubcomponents'
    import { StyledContainer, StyledTooltip } from './Tooltip.styles'
    import { TooltipContentProps, TooltipProps } from './Tooltip.types'

    const Content = React.forwardRef<HTMLSpanElement, TooltipContentProps>(
      function Content({ children, ...props }, ref) {
        return (
          <StyledContainer ref={ref}>
            <StyledTooltip {...props}>{children}</StyledTooltip>
          </StyledContainer>
        )
      }
    )

    /**

     We use tooltips to display additional descriptive information about an element
     or item to the user. For example, we could use them to explain a specific term
     or phrase, to denote the specific format required (e.g. mm/dd/yyy), or to
     clarify certain information (e.g. why a button is disabled).

     They can be displayed either by hovering over an element in the product or by
     hovering over an icon next to an element.

     @since 10.19.0

     @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-tooltip--demo)

     @see [Design Guidelines](https://design.procore.com/tooltip)

     */
    const Tooltip_ = React.forwardRef<
      HTMLElement,
      OverlayTriggerProps & TooltipProps
    >(function Tooltip(
      {
        children,
        initialIsVisible = false,
        overlay,
        placement = 'top',
        trigger = 'hover',
        ...props
      },
      ref
    ) {
      const overlayNode = React.isValidElement(overlay) ? (
        React.cloneElement(overlay as React.ReactElement, { placement })
      ) : (
        <Content placement={placement}>{overlay}</Content>
      )

      return (
        <OverlayTrigger
          {...{
            ...props,
            initialIsVisible,
            overlay: overlayNode,
            placement,
            ref,
            restoreFocusOnHide: false,
            trigger,
            shrinkOverlay: true,
            arrow: true,
          }}
        >
          {children}
        </OverlayTrigger>
      )
    })

    Tooltip_.displayName = 'Tooltip'

    Content.displayName = 'Tooltip.Content'

    export const Tooltip = addSubcomponents(
      {
        Content,
      },
      Tooltip_
    )