git.iko.soy/bridge
on master help sign in
bridge/src/components/WithTooltip.tsx
56 lines 1.4 kB history raw
1import React, { useState, useCallback } from 'react';
2import { useMemo } from 'react';
4export enum TooltipPosition {
5 Top,
6 TopRight,
7 Left,
8 // Add more as necessary here and in #positionStyle
9}
11type WithTooltipArgs = {
12 content: string;
13 children: React.ReactNode;
14 className?: string | undefined;
15 position?: TooltipPosition;
16};
18export default function WithTooltip({
19 content,
20 children,
21 className,
22 position = TooltipPosition.Top,
23}: WithTooltipArgs) {
24 const [isHovered, setHovered] = useState(false);
25 const onMouseEnter = useCallback(() => setHovered(true), []);
26 const onMouseLeave = useCallback(() => setHovered(false), []);
28 const positionStyle = useMemo(() => {
29 switch (position) {
30 case TooltipPosition.Top:
31 return { bottom: '100%' };
32 case TooltipPosition.TopRight:
33 return { bottom: '90%', left: '90%' };
34 case TooltipPosition.Left:
35 return { bottom: '-67%', left: '-400%' };
36 default:
37 return { bottom: '100%' };
38 }
39 }, [position]);
41 return (
42 <div
43 className={className || 'rel nowrap inline-block'}
44 onMouseEnter={onMouseEnter}
45 onMouseLeave={onMouseLeave}>
46 {children}
47 {isHovered && (
48 <div
49 className="abs mb1 bg-black white ph4 pv2 r4 open-tooltip"
50 style={positionStyle}>
51 {content}
52 </div>
53 )}
54 </div>
55 );