webpack.js.org/src/components/Tooltip/Tooltip.jsx at 4c5372d71d1b76d151e0bc447942f84a44d2a649 · webpack/webpack.js.org · GitHub

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
91
92
93
94
95
96
import { useState } from 'react';
import PropTypes from 'prop-types';
const Tooltip = ({
  children,
  content,
  position = 'bottom',
  delay = 300,
  className = '',
}) => {
  const [isVisible, setIsVisible] = useState(false);
  const [isDelayed, setIsDelayed] = useState(false);
  const showTooltip = () => {
    const timer = setTimeout(() => {
      setIsDelayed(true);
    }, delay);
    setIsVisible(true);
    return () => clearTimeout(timer);
  };
  const hideTooltip = () => {
    setIsVisible(false);
    setIsDelayed(false);
  };
  // Position classes - increase the margins to create more space
  const positions = {
    top: 'bottom-full left-1/2 -translate-x-1/2 mb-8',
    bottom: 'top-full left-1/2 -translate-x-1/2 mt-10',
    left: 'right-full top-1/2 -translate-y-1/2 mr-8',
    right: 'left-full top-1/2 -translate-y-1/2 ml-8',
  };
  // Custom background color for both tooltip and triangle
  const bgColor = '#526B78';
  return (
    <div
      className={`relative ${className}`}
      onMouseEnter={showTooltip}
      onMouseLeave={hideTooltip}
      onFocus={showTooltip}
      onBlur={hideTooltip}
    >
      {children}
      {isVisible && (
        <div
          className={`
            absolute z-9999
            ${positions[position]}
            ${isDelayed ? 'opacity-100' : 'opacity-0'}
            transition-opacity duration-200
            pointer-events-none
          `}
        >
          <div
            className="text-white text-xs font-medium p-10 rounded-md whitespace-nowrap shadow-xl"
            style={{ backgroundColor: bgColor }}
          >
            {content}
            {/* Triangle/Arrow - Reduced size */}
            {position === 'top' && (
              <div
                className="absolute top-full left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-t-[6px] border-l-transparent border-r-transparent"
                style={{ borderTopColor: bgColor }}
              ></div>
            )}
            {position === 'bottom' && (
              <div
                className="absolute -top-[6px] left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent"
                style={{ borderBottomColor: bgColor }}
              ></div>
            )}
            {position === 'left' && (
              <div
                className="absolute top-1/2 -translate-y-1/2 right-[-6px] border-solid border-t-[6px] border-b-[6px] border-l-[6px] border-t-transparent border-b-transparent"
                style={{ borderLeftColor: bgColor }}
              ></div>
            )}
            {position === 'right' && (
              <div
                className="absolute top-1/2 -translate-y-1/2 left-[-6px] border-solid border-t-[6px] border-b-[6px] border-r-[6px] border-t-transparent border-b-transparent"
                style={{ borderRightColor: bgColor }}
              ></div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

Tooltip.propTypes = {
  children: PropTypes.node.isRequired,
  content: PropTypes.node.isRequired,
  position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
  delay: PropTypes.number,
  className: PropTypes.string,
};

export default Tooltip;