diff --git a/projects/js-packages/components/changelog/icon-tooltip-add-hover-support b/projects/js-packages/components/changelog/icon-tooltip-add-hover-support new file mode 100644 index 0000000000000..581190cf8e745 --- /dev/null +++ b/projects/js-packages/components/changelog/icon-tooltip-add-hover-support @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +IconTooltip: add support for showing tooltip on hover. diff --git a/projects/js-packages/components/components/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx index c64b6e74309dd..9e70380a248ae 100644 --- a/projects/js-packages/components/components/icon-tooltip/index.tsx +++ b/projects/js-packages/components/components/icon-tooltip/index.tsx @@ -38,12 +38,14 @@ const IconTooltip: React.FC< IconTooltipProps > = ( { children, popoverAnchorStyle = 'icon', forceShow = false, + hoverShow = false, wide = false, inline = true, shift = false, } ) => { const POPOVER_HELPER_WIDTH = 124; const [ isVisible, setIsVisible ] = useState( false ); + const [ hoverTimeout, setHoverTimeout ] = useState( null ); const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] ); const toggleTooltip = useCallback( e => { @@ -78,8 +80,33 @@ const IconTooltip: React.FC< IconTooltipProps > = ( { const isForcedToShow = isAnchorWrapper && forceShow; + const handleMouseEnter = useCallback( () => { + if ( hoverShow ) { + if ( hoverTimeout ) { + clearTimeout( hoverTimeout ); + setHoverTimeout( null ); + } + setIsVisible( true ); + } + }, [ hoverShow, hoverTimeout ] ); + + const handleMouseLeave = useCallback( () => { + if ( hoverShow ) { + const id = setTimeout( () => { + setIsVisible( false ); + setHoverTimeout( null ); + }, 100 ); + setHoverTimeout( id ); + } + }, [ hoverShow ] ); + return ( -
+
{ ! isAnchorWrapper && (