tooltips Tooltip.tsx

0% Statements 0/24
0% Branches 0/7
0% Functions 0/6
0% Lines 0/23
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
83
84
85
86
87
88
89
90  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { useCallback, useEffect, useRef, useState } from "react";
import styled from "styled-components";
import { RelativePortal } from "ui/layout/RelativePortal";
 
export const Tooltip = styled.div`
  color: #000;
  background-color: #fff;
  border-radius: 4px;
  padding: 4px 0;
  overflow: auto;
  box-shadow: 0 0 0 1px rgba(150, 150, 150, 0.3),
    0 4px 11px hsla(0, 0%, 0%, 0.1);
  min-width: 60px;
  z-index: 1001;
  font-size: 11px;
  line-height: normal;
  font-weight: normal;
  padding: 10px;
  max-width: 230px;
  transform: translateX(-10px);
  z-index: 10000;
  white-space: pre-wrap;
  min-width: 150px;
 
  p {
    margin: 10px 0;
  }
  p:first-child {
    margin-top: 0;
  }
  p:last-child {
    margin-bottom: 0;
  }
`;
 
interface TooltipWrapperProps {
  children: React.ReactNode;
  tooltip: React.ReactNode;
  open?: boolean;
}
 
export const TooltipWrapper = ({
  children,
  tooltip,
  open,
}: TooltipWrapperProps) => {
  const [isOpen, setOpen] = useState(open);
  const timer = useRef<ReturnType<typeof setTimeout>>();
 
  useEffect(() => {
    Iif (open !== undefined) {
      setOpen(open);
    }
  }, [open]);
 
  const onClick = useCallback(() => {
    Iif (open === undefined) {
      setOpen(true);
    }
  }, [open]);
 
  const onHoverStart = useCallback(() => {
    Iif (open === undefined) {
      timer.current = setTimeout(() => {
        setOpen(true);
      }, 500);
    }
  }, [open]);
 
  const onHoverEnd = useCallback(() => {
    Iif (open === undefined) {
      Iif (timer.current) {
        clearTimeout(timer.current);
      }
      setOpen(false);
    }
  }, [open]);
 
  return (
    <div onClick={onClick} onMouseOver={onHoverStart} onMouseOut={onHoverEnd}>
      {isOpen && (
        <RelativePortal pin="bottom-left" offsetX={5} offsetY={-5}>
          <Tooltip>{tooltip}</Tooltip>
        </RelativePortal>
      )}
      {children}
    </div>
  );
};