52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
|
|
|
|
const tooltipStyles = (theme) => ({
|
|
height: 'auto',
|
|
maxWidth: '80vw',
|
|
padding: '1rem 2rem',
|
|
background: theme === 'light' ? '#fff' : '#000',
|
|
color: theme === 'light' ? 'rgb(99, 98, 98)' : '#A8A8A8',
|
|
borderRadius: '4px',
|
|
boxShadow: 'rgba(0, 0, 0, 0.55) 0px 0px 16px -3px',
|
|
fontSize: '0.9em'
|
|
})
|
|
|
|
const tooltipArrowStyles = ({ theme, x, y, side }) => ({
|
|
position: "absolute",
|
|
left: x != null ? `${x}px` : '',
|
|
top: y != null ? `${y}px` : '',
|
|
right: '',
|
|
bottom: '',
|
|
[side]: '-4px',
|
|
height: "8px",
|
|
width: "8px",
|
|
background: theme === 'light' ? '#fff' : '#000',
|
|
transform: "rotate(45deg)"
|
|
})
|
|
|
|
export const Tooltip = React.forwardRef((props, ref) => {
|
|
const { theme, children, arrowRef, arrowX, arrowY, placement, ...tooltipProps } = props;
|
|
|
|
const arrowPlacement = {
|
|
top: 'bottom',
|
|
right: 'left',
|
|
bottom: 'top',
|
|
left: 'right',
|
|
}[placement.split('-')[0]];
|
|
|
|
return (
|
|
<div {...tooltipProps} ref={ref}>
|
|
<div style={ tooltipStyles(theme) }>
|
|
{ children }
|
|
</div>
|
|
<div ref={arrowRef} style={ tooltipArrowStyles({
|
|
theme,
|
|
x: arrowX,
|
|
y: arrowY,
|
|
side: arrowPlacement
|
|
}) }></div>
|
|
</div>
|
|
)
|
|
})
|