# All files / utils useTooltipElement.ts

25% Statements 4/16
0% Branches 0/4
0% Functions 0/3
28.57% Lines 4/14

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
    401x

    1x
    1x

    1x

     import {useRef, useEffect} from 'react'

    import {AnnotationTooltipOptions} from '../types'
    import {ANNOTATION_TOOLTIP_CONTAINER_NAME} from '../constants'
    import {useTooltipStyle, useAnnotationStyle} from '../utils/useTooltipStyle'

    /*
      Returns a DOM node that a tooltip can be rendered inside.

      The node will be created and appended to the end of the document body on
      mount. After every render, the tooltip is automatically positioned to be next
      to the mouse. It will be destroyed on unmount.

      The returned node is intended to be used with `React.createPortal`. It is
      appended to the end of the document to circumvent z-index issues.
    */
    export const useTooltipElement = (
      className: string,
      options?: AnnotationTooltipOptions
    ) => {
      const ref = useRef<HTMLDivElement>(null)

      if (ref.current === null) {
        ref.current = document.createElement('div')
        ref.current.classList.add(className)

        document.body.appendChild(ref.current)
      }

      useEffect(() => () => document.body.removeChild(ref.current), [])

      if (className == ANNOTATION_TOOLTIP_CONTAINER_NAME) {
        useAnnotationStyle(ref.current, options)
      } else {
        useTooltipStyle(ref.current)
      }

      return ref.current
    }