@jbrowse/core
Version:
JBrowse 2 core libraries used by plugins
43 lines (42 loc) • 1.81 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { offset, useClientPoint, useFloating, useInteractions, } from '@floating-ui/react';
import { Portal, alpha, useTheme } from '@mui/material';
import { makeStyles } from "../util/tss-react/index.js";
function round(value) {
return Math.round(value * 1e5) / 1e5;
}
const useStyles = makeStyles()(theme => ({
tooltip: {
position: 'absolute',
pointerEvents: 'none',
backgroundColor: alpha(theme.palette.grey[700], 0.9),
borderRadius: theme.shape.borderRadius,
color: theme.palette.common.white,
fontFamily: theme.typography.fontFamily,
padding: '4px 8px',
fontSize: theme.typography.fontSize,
lineHeight: `${round(14 / 10)}em`,
maxWidth: 300,
wordWrap: 'break-word',
},
}));
export default function BaseTooltip({ clientPoint: clientPointCoords, children, placement = 'right', }) {
const theme = useTheme();
const popperTheme = theme.components?.MuiPopper;
const { classes } = useStyles();
const { refs, floatingStyles, context } = useFloating({
placement,
strategy: 'fixed',
middleware: [offset(5)],
});
const clientPoint = useClientPoint(context, clientPointCoords);
const { getFloatingProps } = useInteractions([clientPoint]);
return (_jsx(Portal, { container: popperTheme?.defaultProps?.container, children: _jsx("div", { className: classes.tooltip, ref: refs.setFloating, style: {
...floatingStyles,
zIndex: 100000,
visibility: floatingStyles.transform === 'translate(0px, 0px)'
? 'hidden'
: undefined,
pointerEvents: 'none',
}, ...getFloatingProps(), children: children }) }));
}