forked from styleguidist/react-styleguidist
/
TooltipRenderer.tsx
51 lines (46 loc) · 1.22 KB
/
TooltipRenderer.tsx
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
import React from 'react';
import Tippy from '@tippyjs/react';
import Styled, { JssInjectedProps } from 'rsg-components/Styled';
import * as Rsg from '../../../typings';
export const styles = ({ space, color, borderRadius, fontSize }: Rsg.Theme) => ({
tooltip: {
'&.tippy-box': {
transitionProperty: [['opacity']],
'&[data-state="hidden"]': {
opacity: 0,
},
},
'& .tippy-content': {
padding: space[0],
border: `1px ${color.border} solid`,
borderRadius,
background: color.baseBackground,
boxShadow: [[0, 2, 4, 'rgba(0,0,0,.15)']],
fontSize: fontSize.small,
color: color.type,
},
},
});
export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
export interface TooltipProps extends JssInjectedProps {
children: React.ReactNode;
content: React.ReactNode;
placement?: TooltipPlacement;
}
function TooltipRenderer({ classes, children, content, placement = 'top' }: TooltipProps) {
return (
<Tippy
content={content}
className={classes.tooltip}
interactive
placement={placement}
trigger="click mouseenter focus"
arrow={false}
>
<span role="button" tabIndex={0}>
{children}
</span>
</Tippy>
);
}
export default Styled<TooltipProps>(styles)(TooltipRenderer);