@@ -3,7 +3,7 @@ import Popover from "@material-ui/core/Popover"
33import { makeStyles } from "@material-ui/core/styles"
44import HelpIcon from "@material-ui/icons/HelpOutline"
55import OpenInNewIcon from "@material-ui/icons/OpenInNew"
6- import React , { createContext , useContext , useState } from "react"
6+ import React , { createContext , useContext , useRef , useState } from "react"
77import { Stack } from "../../Stack/Stack"
88
99type Icon = typeof HelpIcon
@@ -29,31 +29,36 @@ const useHelpTooltip = () => {
2929
3030export const HelpTooltip :React . FC < HelpTooltipProps > = ( { children, open, size= "medium" } ) => {
3131const styles = useStyles ( { size} )
32- const [ anchorEl , setAnchorEl ] = useState < HTMLButtonElement | null > ( null )
33- open = open ?? Boolean ( anchorEl )
34- const id = open ?"help-popover" :undefined
32+ const anchorRef = useRef < HTMLButtonElement > ( null )
33+ const [ isOpen , setIsOpen ] = useState ( ! ! open )
34+ const id = isOpen ?"help-popover" :undefined
3535
3636const onClose = ( ) => {
37- setAnchorEl ( null )
37+ setIsOpen ( false )
3838}
3939
4040return (
4141< >
4242< button
43+ ref = { anchorRef }
4344aria-describedby = { id }
4445className = { styles . button }
4546onClick = { ( event ) => {
4647event . stopPropagation ( )
47- setAnchorEl ( event . currentTarget )
48+ setIsOpen ( true )
49+ } }
50+ onMouseEnter = { ( ) => {
51+ setIsOpen ( true )
4852} }
4953>
5054< HelpIcon className = { styles . icon } />
5155</ button >
5256< Popover
57+ className = { styles . popover }
5358classes = { { paper :styles . popoverPaper } }
5459id = { id }
55- open = { open }
56- anchorEl = { anchorEl }
60+ open = { isOpen }
61+ anchorEl = { anchorRef . current }
5762onClose = { onClose }
5863anchorOrigin = { {
5964vertical :"bottom" ,
@@ -63,8 +68,16 @@ export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open, size =
6368vertical :"top" ,
6469horizontal :"left" ,
6570} }
71+ PaperProps = { {
72+ onMouseEnter :( ) => {
73+ setIsOpen ( true )
74+ } ,
75+ onMouseLeave :( ) => {
76+ setIsOpen ( false )
77+ } ,
78+ } }
6679>
67- < HelpTooltipContext . Provider value = { { open, onClose} } > { children } </ HelpTooltipContext . Provider >
80+ < HelpTooltipContext . Provider value = { { open : isOpen , onClose} } > { children } </ HelpTooltipContext . Provider >
6881</ Popover >
6982</ >
7083)
@@ -166,11 +179,16 @@ const useStyles = makeStyles((theme) => ({
166179height :( { size} :{ size ?:Size } ) => theme . spacing ( getIconSpacingFromSize ( size ) ) ,
167180} ,
168181
182+ popover :{
183+ pointerEvents :"none" ,
184+ } ,
185+
169186popoverPaper :{
170187marginTop :theme . spacing ( 0.5 ) ,
171188width :theme . spacing ( 38 ) ,
172189padding :theme . spacing ( 2.5 ) ,
173190color :theme . palette . text . secondary ,
191+ pointerEvents :"auto" ,
174192} ,
175193
176194title :{