diff --git a/new-lamassu-admin/src/components/Tooltip.js b/new-lamassu-admin/src/components/Tooltip.js index 53d7fc80..f9c9a183 100644 --- a/new-lamassu-admin/src/components/Tooltip.js +++ b/new-lamassu-admin/src/components/Tooltip.js @@ -18,7 +18,7 @@ const useStyles = makeStyles({ }) }) -const Tooltip = memo(({ children, width, Icon = HelpIcon }) => { +const usePopperHandler = width => { const classes = useStyles({ width }) const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null) @@ -32,19 +32,31 @@ const Tooltip = memo(({ children, width, Icon = HelpIcon }) => { const helpPopperOpen = Boolean(helpPopperAnchorEl) + return { + classes, + helpPopperAnchorEl, + helpPopperOpen, + handleOpenHelpPopper, + handleCloseHelpPopper + } +} + +const Tooltip = memo(({ children, width, Icon = HelpIcon }) => { + const handler = usePopperHandler(width) + return ( - +
-
{children}
+
{children}
@@ -52,31 +64,20 @@ const Tooltip = memo(({ children, width, Icon = HelpIcon }) => { }) const HoverableTooltip = memo(({ parentElements, children, width }) => { - const classes = useStyles({ width }) - const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null) - - const handleOpenHelpPopper = event => { - setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget) - } - - const handleCloseHelpPopper = () => { - setHelpPopperAnchorEl(null) - } - - const helpPopperOpen = Boolean(helpPopperAnchorEl) + const handler = usePopperHandler(width) return (
+ onMouseEnter={handler.handleOpenHelpPopper} + onMouseLeave={handler.handleCloseHelpPopper}> {parentElements}
-
{children}
+
{children}
)