diff --git a/src/components/HelpIconPopover/index.jsx b/src/components/HelpIconPopover/index.jsx
index 0f9d7a17b..416e45c05 100644
--- a/src/components/HelpIconPopover/index.jsx
+++ b/src/components/HelpIconPopover/index.jsx
@@ -6,8 +6,8 @@ import './styles.css';
 
 const HelpIconPopover = ({ children, id, placement }) => (
   <div {...expandDts(id)} data-testid="help-icon-popover-wrapper" className="help-icon-popover-component">
-    <Popover triggers={['hover']} placement={placement} popoverContent={children}>
-      <div data-testid="help-icon-popover-trigger" className="help-icon-popover-component-trigger" />
+    <Popover placement={placement} popoverContent={children}>
+      <div tabIndex={0} data-testid="help-icon-popover-trigger" className="help-icon-popover-component-trigger" />
     </Popover>
   </div>
 );
diff --git a/src/components/HelpIconPopover/index.spec.jsx b/src/components/HelpIconPopover/index.spec.jsx
index 384cf4027..e82d29094 100644
--- a/src/components/HelpIconPopover/index.spec.jsx
+++ b/src/components/HelpIconPopover/index.spec.jsx
@@ -20,7 +20,7 @@ describe('<HelpIconPopover />', () => {
     expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
 
     act(() => {
-      fireEvent.mouseEnter(getByTestId('help-icon-popover-trigger'));
+      fireEvent.pointerOver(getByTestId('help-icon-popover-trigger'));
       jest.runAllTimers();
     });
 
@@ -37,7 +37,7 @@ describe('<HelpIconPopover />', () => {
     );
 
     act(() => {
-      fireEvent.mouseEnter(getByTestId('help-icon-popover-trigger'));
+      fireEvent.pointerOver(getByTestId('help-icon-popover-trigger'));
       jest.runAllTimers();
     });
 
diff --git a/src/components/HoverDropdownMenu/index.jsx b/src/components/HoverDropdownMenu/index.jsx
index 7bff4f1a3..5c74c777c 100644
--- a/src/components/HoverDropdownMenu/index.jsx
+++ b/src/components/HoverDropdownMenu/index.jsx
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Popover from '../Popover';
@@ -6,48 +5,16 @@ import PopoverLinkItem from './PopoverLinkItem';
 import './styles.css';
 
 const HoverDropdownMenu = ({ arrowPosition, headerText, hoverComponent, children }) => {
-  const [popperNode, setPopperNode] = React.useState(null);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [mouseInPopover, setMouseInPopover] = React.useState(false);
-
-  const closeMenu = _.debounce(() => {
-    setIsOpen(false);
-  }, 100);
-
-  const popoverEnterHandler = React.useCallback(() => setMouseInPopover(true), [setMouseInPopover]);
-  const popoverLeaveHandler = React.useCallback(() => {
-    setMouseInPopover(false);
-    closeMenu();
-  }, [setMouseInPopover, closeMenu]);
-
-  React.useEffect(() => {
-    if (popperNode) {
-      popperNode.addEventListener('mouseenter', popoverEnterHandler);
-      popperNode.addEventListener('mouseleave', popoverLeaveHandler);
-    }
-  }, [popperNode, popoverEnterHandler, popoverLeaveHandler]);
-
-  const openMenu = () => {
-    setIsOpen(true);
-    setMouseInPopover(false);
-  };
-
-  const element = (
-    <div data-testid="hover-dropdown-element" onMouseEnter={openMenu} onMouseLeave={closeMenu}>
-      {hoverComponent}
-    </div>
-  );
+  const element = <div data-testid="hover-dropdown-element">{hoverComponent}</div>;
 
   return (
     <div data-testid="hover-dropdown-wrapper" className="hover-dropdown">
       {children && children.length > 0 ? (
         <Popover
           placement={`bottom-${arrowPosition === 'left' ? 'start' : 'end'}`}
-          triggers={['disabled']}
-          isOpen={isOpen || mouseInPopover}
+          contentHoverable
           title={headerText}
           popoverContent={<ul className="list-unstyled">{children}</ul>}
-          popperRef={setPopperNode}
         >
           {element}
         </Popover>
diff --git a/src/components/HoverDropdownMenu/index.spec.jsx b/src/components/HoverDropdownMenu/index.spec.jsx
index ec882f4c6..5a5fd9783 100644
--- a/src/components/HoverDropdownMenu/index.spec.jsx
+++ b/src/components/HoverDropdownMenu/index.spec.jsx
@@ -62,7 +62,7 @@ describe('<HoverDropdownMenu />', () => {
     );
 
     act(() => {
-      fireEvent.mouseEnter(getByTestId('hover-dropdown-element'));
+      fireEvent.pointerOver(getByTestId('hover-dropdown-element'));
       jest.runAllTimers();
     });
 
@@ -83,19 +83,19 @@ describe('<HoverDropdownMenu />', () => {
       </HoverDropdownMenu>
     );
     act(() => {
-      fireEvent.mouseEnter(getByTestId('hover-dropdown-element'));
+      fireEvent.pointerOver(getByTestId('hover-dropdown-element'));
       jest.runAllTimers();
     });
     expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
 
     act(() => {
-      fireEvent.mouseLeave(getByTestId('hover-dropdown-element'));
+      fireEvent.pointerLeave(getByTestId('popover-wrapper'));
       jest.runAllTimers();
     });
     expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
 
     act(() => {
-      fireEvent.mouseEnter(getByTestId('hover-dropdown-element'));
+      fireEvent.pointerOver(getByTestId('hover-dropdown-element'));
       jest.runAllTimers();
     });
     expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
@@ -111,34 +111,27 @@ describe('<HoverDropdownMenu />', () => {
     );
 
     act(() => {
-      fireEvent.mouseEnter(getByTestId('hover-dropdown-element'));
+      fireEvent.pointerOver(getByTestId('hover-dropdown-element'));
       jest.runAllTimers();
     });
     expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
 
     act(() => {
-      fireEvent.mouseLeave(getByTestId('hover-dropdown-element'));
-      fireEvent.mouseEnter(getByTestId('popover-wrapper'));
-      jest.advanceTimersByTime(50);
-    });
-    expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
-
-    act(() => {
-      fireEvent.mouseLeave(getByTestId('popover-wrapper'));
-      fireEvent.mouseEnter(getByTestId('popover-title'));
-      jest.advanceTimersByTime(50);
+      fireEvent.pointerLeave(getByTestId('hover-dropdown-element'));
+      fireEvent.pointerOver(getByTestId('popover-wrapper'));
+      jest.runAllTimers();
     });
     expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
 
     act(() => {
-      fireEvent.mouseLeave(getByTestId('popover-title'));
-      fireEvent.mouseEnter(queryAllByTestId('popover-link-item-wrapper')[0]);
+      fireEvent.pointerLeave(getByTestId('popover-title'));
+      fireEvent.pointerOver(queryAllByTestId('popover-link-item-wrapper')[0]);
       jest.advanceTimersByTime(49);
     });
     expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
 
     act(() => {
-      fireEvent.mouseLeave(getByTestId('popover-wrapper'));
+      fireEvent.pointerLeave(getByTestId('popover-wrapper'));
       jest.runAllTimers();
     });
 
diff --git a/src/components/Popover/Popper.d.ts b/src/components/Popover/Popper.d.ts
index 1e0a77adb..ed3f6e51a 100644
--- a/src/components/Popover/Popper.d.ts
+++ b/src/components/Popover/Popper.d.ts
@@ -31,10 +31,10 @@ export interface PopperProps<M = ''> extends PopperModifiers<M> {
   popoverClass?: string;
   popoverContent: PopperPopoverContent;
   refElement?: Element;
-  boundariesElement?: Element;
   title?: string;
   wrapperStyles?: Object;
   popperRef?: (...args: any[]) => any;
+  hasHoverRegion?: boolean;
 }
 
 declare const Popper: <M>(props: PopperProps<M>) => React.ReactElement<any, any> | null;
diff --git a/src/components/Popover/Popper.jsx b/src/components/Popover/Popper.jsx
index 5d413bba3..437d284fa 100644
--- a/src/components/Popover/Popper.jsx
+++ b/src/components/Popover/Popper.jsx
@@ -55,6 +55,7 @@ const Popper = ({
   refElement,
   modifiers = [],
   popperRef,
+  hasHoverRegion,
 }) => {
   const [popperElement, setPopperElement] = React.useState(null);
   const [arrowElement, setArrowElement] = React.useState(null);
@@ -108,6 +109,12 @@ const Popper = ({
           {_.isFunction(popoverContent) ? popoverContent({ update }) : popoverContent}
         </div>
       </div>
+      {hasHoverRegion && (
+        <div
+          className="aui--popover-hover-region"
+          data-placement={_.get(attributes, 'popper.data-popper-placement', popperPlacement)}
+        />
+      )}
       <div
         data-testid="popover-arrow"
         className="aui--popover-arrow"
@@ -129,10 +136,10 @@ Popper.propTypes = {
   popoverClass: PropTypes.string,
   popoverContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   refElement: PropTypes.instanceOf(Element),
-  boundariesElement: PropTypes.instanceOf(Element),
   title: PropTypes.string,
   wrapperStyles: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   popperRef: PropTypes.func,
+  hasHoverRegion: PropTypes.bool,
 };
 
 export default Popper;
diff --git a/src/components/Popover/WithRef.d.ts b/src/components/Popover/WithRef.d.ts
index 11b4ffab0..316274a3e 100644
--- a/src/components/Popover/WithRef.d.ts
+++ b/src/components/Popover/WithRef.d.ts
@@ -38,6 +38,7 @@ export interface WithRefProps<M = ''> extends PopperModifiers<M> {
   popoverContent: WithRefPopoverContent;
   isOpen?: boolean;
   popperRef?: (...args: any[]) => any;
+  hasHoverRegion?: boolean;
   dts?: string;
 }
 
diff --git a/src/components/Popover/WithRef.jsx b/src/components/Popover/WithRef.jsx
index 8c7ea75c8..06496fff7 100644
--- a/src/components/Popover/WithRef.jsx
+++ b/src/components/Popover/WithRef.jsx
@@ -22,6 +22,7 @@ const WithRefM = ({
   arrowStyles,
   getContainer,
   popperRef,
+  hasHoverRegion,
 }) => {
   const themeClass = _.includes(themes, theme) ? `popover-${theme}` : 'popover-light';
   const popoverClass = classnames('aui--popover-wrapper', themeClass, popoverClassNames);
@@ -37,12 +38,12 @@ const WithRefM = ({
       dts={dts}
       title={title}
       popoverContent={popoverContent}
-      boundariesElement={boundariesElement}
       arrowStyles={arrowStyles}
       placement={placement}
       strategy={strategy}
       modifiers={modifiers}
       popperRef={popperRef}
+      hasHoverRegion={hasHoverRegion}
     />,
     boundariesElement
   );
@@ -64,6 +65,7 @@ WithRef.propTypes = {
   popoverContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   isOpen: PropTypes.bool,
   popperRef: PropTypes.func,
+  hasHoverRegion: PropTypes.bool,
   dts: PropTypes.string,
 };
 
diff --git a/src/components/Popover/index.d.ts b/src/components/Popover/index.d.ts
index 7321afcd1..21119bb7a 100644
--- a/src/components/Popover/index.d.ts
+++ b/src/components/Popover/index.d.ts
@@ -27,11 +27,54 @@ export type PopoverPopoverContent = React.ReactNode | ((...args: any[]) => any);
 
 export type PopoverTriggers = 'click' | 'hover' | 'focus' | 'disabled' | ('click' | 'hover' | 'focus' | 'disabled')[];
 
+export interface PopoverAnchorRef {
+  current?: any;
+}
+
+export interface PopoverTriggerRef {
+  current?: any;
+}
+
 export interface PopoverProps<M = ''> extends PopperModifiers<M> {
   theme?: PopoverTheme;
   title?: React.ReactNode;
   className?: string;
   popoverClassNames?: string;
+  /**
+   * hover show delay in ms
+   */
+  delayShow?: number;
+  /**
+   * hover hide delay in ms
+   */
+  delayHide?: number;
+  /**
+   * when used with the hover trigger, hovering the popover content
+   * will keep the popover open.
+   * Popover will close when mousing out of the popover content.
+   * For the best UX, use with `delayHide` of at least 200
+   */
+  contentHoverable?: boolean;
+  /**
+   * when true:
+   * - the popover content will be focused after opening
+   * - the popover content will trap focus
+   * - the popover trigger will re-focus on close
+   */
+  isMenu?: boolean;
+  /**
+   * callback fired when Popover open state changes
+   * @param {boolean} openState
+   * @param {object} event - event object
+   * @param {string} eventType - the type of event that triggered this change.
+   * Either a dom event (`keydown`, `pointerover`, `pointerleave`, `click`),
+   * or `clickOutside`, when closed via clicking outside, `disabed` when disabled trigger is applied.
+   */
+  onOpenChange?: (...args: any[]) => any;
+  /**
+   * [`isMenu`] callback called when closing on outside click
+   */
+  onClickOutside?: (...args: any[]) => any;
   /**
    * arrow css styles, mainly for positioning the arrow
    */
@@ -41,11 +84,15 @@ export interface PopoverProps<M = ''> extends PopperModifiers<M> {
   placement?: PopoverPlacement;
   strategy?: PopoverStrategy;
   popoverContent: PopoverPopoverContent;
-  children: React.ReactNode;
+  /**
+   * children is optional when using `triggerRef`
+   */
+  children?: React.ReactNode;
   triggers?: PopoverTriggers;
   isOpen?: boolean;
   getContainer?: (...args: any[]) => any;
-  popperRef?: (...args: any[]) => any;
+  anchorRef?: PopoverAnchorRef;
+  triggerRef?: PopoverTriggerRef;
   dts?: string;
 }
 
diff --git a/src/components/Popover/index.jsx b/src/components/Popover/index.jsx
index 8057921e9..ecdd7d9aa 100644
--- a/src/components/Popover/index.jsx
+++ b/src/components/Popover/index.jsx
@@ -2,74 +2,106 @@
 import _ from 'lodash';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React from 'react';
 import { themes, popoverPlacements, popoverStrategies } from './constants';
 import WithRef from './WithRef';
+import usePopover from './usePopover';
+import DismissibleFocusTrap from '../DismissibleFocusTrap';
 import './styles.css';
 
 const triggerPropTypes = PropTypes.oneOf(['click', 'hover', 'focus', 'disabled']);
 
-const Popover = (props) => {
-  const { isOpen } = props;
-  const [isPopoverOpen, setIsPopoverOpen] = useState(isOpen);
+const Popover = ({
+  isOpen: isOpenProp,
+  onOpenChange,
+  theme,
+  title,
+  children,
+  dts,
+  triggers: triggersProp,
+  popoverClassNames,
+  className,
+  wrapperStyles,
+  popoverContent,
+  getContainer,
+  arrowStyles,
+  placement,
+  strategy,
+  modifiers,
+  delayShow = 0,
+  delayHide = 0,
+  contentHoverable = false,
+  isMenu,
+  triggerRef: triggerRefProp,
+  onClickOutside: onClickOutsideProp,
+  anchorRef,
+}) => {
+  const triggers = _.castArray(triggersProp);
+
+  const { triggerRef, withRefProps, closePopover, onClickOutside, triggerSource } = usePopover({
+    triggers,
+    triggerRef: triggerRefProp,
+    anchorRef,
+    onOpenChange,
+    isOpen: isOpenProp,
+    onClickOutside: onClickOutsideProp,
+    isMenu,
+    contentHoverable,
+    delayHide,
+    delayShow,
+  });
 
-  React.useEffect(() => {
-    setIsPopoverOpen(isOpen);
-  }, [setIsPopoverOpen, isOpen]);
-
-  const closePopover = React.useCallback(() => setIsPopoverOpen(false), [setIsPopoverOpen]);
-
-  const openPopover = React.useCallback(() => setIsPopoverOpen(true), [setIsPopoverOpen]);
-
-  const togglePopover = React.useCallback(() => setIsPopoverOpen(!isPopoverOpen), [setIsPopoverOpen, isPopoverOpen]);
-
-  const onClick = () => togglePopover();
-
-  const onFocus = () => openPopover();
-
-  const onBlur = () => closePopover();
-
-  const onMouseOver = () => openPopover();
-
-  const onMouseOut = () => closePopover();
-
-  const { title, children, className, dts, popoverContent, popperRef } = props;
   const elementClass = classnames('aui--popover-element', className);
-  const triggers = _.flattenDeep([props.triggers]);
-
-  const [elementRef, setReferenceElement] = useState(null);
+  const refElement = anchorRef?.current ?? triggerRef?.current;
+
+  const content = isMenu ? (
+    _.isFunction(popoverContent) ? (
+      (...args) => (
+        <DismissibleFocusTrap
+          disabled={triggerSource === 'pointerover'}
+          onClickOutside={onClickOutside}
+          onEscape={closePopover}
+        >
+          {popoverContent(...args)}
+        </DismissibleFocusTrap>
+      )
+    ) : (
+      <DismissibleFocusTrap
+        disabled={triggerSource === 'pointerover'}
+        onClickOutside={onClickOutside}
+        onEscape={closePopover}
+      >
+        {popoverContent}
+      </DismissibleFocusTrap>
+    )
+  ) : (
+    popoverContent
+  );
 
   return (
     <>
-      <span
-        data-testid="popover-element"
-        className={elementClass}
-        ref={setReferenceElement}
-        {...(triggers.includes('disabled')
-          ? {}
-          : {
-              ...(triggers.includes('click') ? { onClick } : {}),
-              ...(triggers.includes('hover') ? { onMouseOver, onMouseOut } : {}),
-              ...(triggers.includes('focus') ? { onFocus, onBlur } : {}),
-            })}
-      >
-        {children}
-      </span>
+      {!triggerRefProp ? (
+        <span ref={triggerRef} data-testid="popover-element" className={elementClass}>
+          {children}
+        </span>
+      ) : (
+        children
+      )}
+
       <WithRef
-        popoverClassNames={props.popoverClassNames}
-        wrapperStyles={props.wrapperStyles}
+        popoverClassNames={popoverClassNames}
+        wrapperStyles={wrapperStyles}
         dts={dts}
         title={title}
-        theme={props.theme}
-        popoverContent={popoverContent}
-        refElement={elementRef}
-        getContainer={props.getContainer}
-        arrowStyles={props.arrowStyles}
-        placement={props.placement}
-        strategy={props.strategy}
-        modifiers={props.modifiers}
-        isOpen={isPopoverOpen}
-        popperRef={popperRef}
+        theme={theme}
+        popoverContent={content}
+        refElement={refElement}
+        getContainer={getContainer}
+        arrowStyles={arrowStyles}
+        placement={placement}
+        strategy={strategy}
+        modifiers={modifiers}
+        {...withRefProps}
       />
     </>
   );
@@ -80,6 +112,43 @@ Popover.propTypes = {
   title: PropTypes.node,
   className: PropTypes.string,
   popoverClassNames: PropTypes.string,
+  /**
+   * hover show delay in ms
+   */
+  delayShow: PropTypes.number,
+  /**
+   * hover hide delay in ms
+   */
+  delayHide: PropTypes.number,
+  /**
+   * when used with the hover trigger, hovering the popover content
+   * will keep the popover open.
+   *
+   * Popover will close when mousing out of the popover content.
+   *
+   * For the best UX, use with `delayHide` of at least 200
+   */
+  contentHoverable: PropTypes.bool,
+  /**
+   * when true:
+   * - the popover content will be focused after opening
+   * - the popover content will trap focus
+   * - the popover trigger will re-focus on close
+   */
+  isMenu: PropTypes.bool,
+  /**
+   * callback fired when Popover open state changes
+   * @param {boolean} openState
+   * @param {object} event - event object
+   * @param {string} eventType - the type of event that triggered this change.
+   * Either a dom event (`keydown`, `pointerover`, `pointerleave`, `click`),
+   * or `clickOutside`, when closed via clicking outside, `disabed` when disabled trigger is applied.
+   */
+  onOpenChange: PropTypes.func,
+  /**
+   * [`isMenu`] callback called when closing on outside click
+   */
+  onClickOutside: PropTypes.func,
   /**
    *  arrow css styles, mainly for positioning the arrow
    */
@@ -89,11 +158,15 @@ Popover.propTypes = {
   placement: PropTypes.oneOf(popoverPlacements),
   strategy: PropTypes.oneOf(popoverStrategies),
   popoverContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  children: PropTypes.node.isRequired,
+  /**
+   * children is optional when using `triggerRef`
+   */
+  children: PropTypes.node,
   triggers: PropTypes.oneOfType([triggerPropTypes, PropTypes.arrayOf(triggerPropTypes)]),
   isOpen: PropTypes.bool,
   getContainer: PropTypes.func,
-  popperRef: PropTypes.func,
+  anchorRef: PropTypes.shape({ current: PropTypes.any }),
+  triggerRef: PropTypes.shape({ current: PropTypes.any }),
   dts: PropTypes.string,
 };
 
@@ -101,10 +174,11 @@ Popover.defaultProps = {
   theme: 'light',
   placement: 'auto',
   strategy: 'absolute',
-  triggers: 'hover',
-  isOpen: false,
+  triggers: ['hover', 'focus'],
 };
 
 Popover.WithRef = WithRef;
 
+export { default as usePopover } from './usePopover';
+
 export default Popover;
diff --git a/src/components/Popover/index.spec.jsx b/src/components/Popover/index.spec.jsx
index b90a9de47..f622e9d26 100644
--- a/src/components/Popover/index.spec.jsx
+++ b/src/components/Popover/index.spec.jsx
@@ -1,8 +1,17 @@
 import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { render, cleanup, fireEvent, act, createEvent } from '@testing-library/react';
 import Popover from '.';
 import { renderArrowStyles } from './Popper';
 
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.runAllTimers();
+  jest.useRealTimers();
+});
+
 afterEach(cleanup);
 
 describe('<Popover />', () => {
@@ -16,17 +25,23 @@ describe('<Popover />', () => {
       expect(queryByTestId('popover-element')).toBeInTheDocument();
       expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
 
-      fireEvent.click(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+      act(() => {
+        fireEvent.click(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+      });
 
-      fireEvent.click(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+      act(() => {
+        fireEvent.click(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+      });
     });
   });
 
-  describe('onMouseOver() and onMouseOut()', () => {
+  describe('onPointerOver() and onPointerLeave()', () => {
     it('should trigger popover open or close', () => {
       const { getByTestId, queryByTestId } = render(
         <Popover id="popover-example" theme="dark" popoverContent={<div />} triggers="hover">
@@ -36,14 +51,20 @@ describe('<Popover />', () => {
 
       expect(queryByTestId('popover-element')).toBeInTheDocument();
       expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
-
-      fireEvent.mouseOver(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
-
-      fireEvent.mouseOut(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+      act(() => {
+        fireEvent.pointerOver(getByTestId('popover-element'));
+        jest.runAllTimers();
+        fireEvent.pointerOver(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+      });
+      act(() => {
+        fireEvent.pointerLeave(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+      });
     });
   });
 
@@ -58,17 +79,221 @@ describe('<Popover />', () => {
       expect(queryByTestId('popover-element')).toBeInTheDocument();
       expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
 
-      fireEvent.focus(getByTestId('popover-element'));
+      act(() => {
+        fireEvent.focus(getByTestId('popover-element'));
+        jest.runAllTimers();
+
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+      });
+
+      act(() => {
+        fireEvent.blur(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  it('should work with contentHoverable, keeping content open when hovered, and re-hovered within the delay hide time', () => {
+    const { getByTestId, queryByTestId } = render(
+      <div>
+        <Popover
+          contentHoverable
+          delayHide={500}
+          delayShow={100}
+          className="test-class"
+          popoverContent={<div data-testid="content"></div>}
+          title="Some title"
+          isOpen
+        >
+          <label className="message">Test message</label>
+        </Popover>
+      </div>
+    );
+    act(() => {
+      expect(queryByTestId('popover-element')).toBeInTheDocument();
+      fireEvent.pointerOver(getByTestId('popover-element'));
+      jest.runAllTimers();
       expect(queryByTestId('popover-element')).toBeInTheDocument();
       expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+      fireEvent.pointerLeave(getByTestId('popover-element'));
+
+      fireEvent.pointerEnter(getByTestId('popover-wrapper'));
+      jest.runAllTimers();
+      expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+      fireEvent.pointerLeave(getByTestId('popover-wrapper'));
+      jest.advanceTimersByTime(250);
+      fireEvent.pointerEnter(getByTestId('popover-wrapper'));
+      fireEvent.pointerLeave(getByTestId('popover-wrapper'));
+      expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+      jest.advanceTimersByTime(501);
+      expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+    });
+
+    act(() => {
+      fireEvent.pointerOver(getByTestId('popover-element'));
+      jest.runAllTimers();
+      fireEvent.pointerOver(getByTestId('content'));
 
-      fireEvent.blur(getByTestId('popover-element'));
       expect(queryByTestId('popover-element')).toBeInTheDocument();
+      expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+      fireEvent.pointerEnter(getByTestId('popover-wrapper'));
+      jest.runAllTimers();
+      expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+    });
+  });
+  describe('isMenu', () => {
+    it('should be able to work as a menu', () => {
+      const onClickOutside = jest.fn();
+      const { getByTestId, queryByTestId } = render(
+        <div data-testid="outisde">
+          <Popover
+            isMenu
+            triggers="click"
+            className="test-class"
+            popoverContent={<div data-testid="content"></div>}
+            onClickOutside={onClickOutside}
+            title="Some title"
+          >
+            <label className="message">Test message</label>
+          </Popover>
+        </div>
+      );
+      act(() => {
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        fireEvent.click(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+        fireEvent.mouseDown(queryByTestId('outisde'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+        expect(onClickOutside).toBeCalledTimes(1);
+      });
+    });
+
+    it('click outside should be preventable', () => {
+      const onClickOutside = jest.fn();
+
+      const { getByTestId } = render(
+        <div data-testid="outisde">
+          <Popover
+            isMenu
+            triggers="click"
+            className="test-class"
+            popoverContent={<div data-testid="content"></div>}
+            onClickOutside={(e) => e.preventDefault()}
+            title="Some title"
+          >
+            <label className="message">Test message</label>
+          </Popover>
+        </div>
+      );
+      act(() => {
+        expect(getByTestId('popover-element')).toBeInTheDocument();
+        fireEvent.click(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(getByTestId('popover-wrapper')).toBeInTheDocument();
+        fireEvent.mouseDown(getByTestId('outisde'));
+        jest.runAllTimers();
+        expect(getByTestId('popover-wrapper')).toBeInTheDocument();
+        expect(onClickOutside).toBeCalledTimes(0);
+      });
+    });
+
+    it('should be able to work as a menu with render function content', () => {
+      const { getByTestId, queryByTestId } = render(
+        <div data-testid="outisde">
+          <Popover
+            isMenu
+            triggers="click"
+            className="test-class"
+            popoverContent={() => <div data-testid="content"></div>}
+            title="Some title"
+          >
+            <label className="message">Test message</label>
+          </Popover>
+        </div>
+      );
+      act(() => {
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        fireEvent.click(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+        fireEvent.keyDown(queryByTestId('focus-trap'), { key: 'Escape' });
+        jest.runAllTimers();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  it('should call onOpenChange', () => {
+    const onOpenChange = jest.fn();
+    const { getByTestId, queryByTestId, rerender } = render(
+      <div>
+        <Popover
+          onOpenChange={onOpenChange}
+          className="test-class"
+          popoverContent={<div data-testid="content"></div>}
+          title="Some title"
+        >
+          <label className="message">Test message</label>
+        </Popover>
+      </div>
+    );
+    act(() => {
+      expect(queryByTestId('popover-element')).toBeInTheDocument();
+      fireEvent.pointerOver(getByTestId('popover-element'), {});
+      jest.runAllTimers();
+      const evt = createEvent.pointerOver(getByTestId('popover-element'));
+
+      expect(onOpenChange).toBeCalledWith(true, evt, 'pointerover');
+    });
+
+    act(() => {
+      rerender(
+        <div>
+          <Popover
+            onOpenChange={onOpenChange}
+            isOpen={false}
+            className="test-class"
+            popoverContent={<div data-testid="content"></div>}
+            title="Some title"
+          >
+            <label className="message">Test message</label>
+          </Popover>
+        </div>
+      );
+
+      jest.runAllTimers();
+
       expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
     });
+
+    act(() => {
+      rerender(
+        <div>
+          <Popover
+            onOpenChange={onOpenChange}
+            isOpen={true}
+            className="test-class"
+            popoverContent={<div data-testid="content"></div>}
+            title="Some title"
+          >
+            <label className="message">Test message</label>
+          </Popover>
+        </div>
+      );
+
+      jest.runAllTimers();
+
+      expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+    });
   });
 
   it('should render without error', () => {
+    console.error = jest.fn();
     const { getByTestId, queryByTestId } = render(
       <div>
         <Popover className="test-class" popoverContent={<div />} title="Some title" isOpen>
@@ -76,13 +301,13 @@ describe('<Popover />', () => {
         </Popover>
       </div>
     );
+    act(() => {
+      expect(queryByTestId('popover-element')).toBeInTheDocument(); //Manager
+      expect(getByTestId('popover-element')).toHaveTextContent('Test message');
+      expect(getByTestId('popover-wrapper')).toHaveTextContent('Some title'); //Popper
 
-    expect(queryByTestId('popover-element')).toBeInTheDocument(); //Manager
-    expect(getByTestId('popover-element')).toHaveTextContent('Test message');
-    expect(getByTestId('popover-wrapper')).toHaveTextContent('Some title'); //Popper
-
-    console.error = jest.fn();
-    expect(console.error).toHaveBeenCalledTimes(0);
+      expect(console.error).toHaveBeenCalledTimes(0);
+    });
   });
 
   it('should be able to set theme', () => {
@@ -211,25 +436,29 @@ describe('<Popover />', () => {
           id="popover-example"
           popoverContent={() => <div>test</div>}
           placement="bottom-end"
-          triggers={['focus', 'click']}
+          triggers={['focus', 'hover']}
         >
           Test message
         </Popover>
       );
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
-
-      fireEvent.click(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
 
-      fireEvent.blur(getByTestId('popover-element'));
       expect(queryByTestId('popover-element')).toBeInTheDocument();
       expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
 
-      fireEvent.focus(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+      act(() => {
+        jest.runAllTimers();
+        fireEvent.focus(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
+      });
+
+      act(() => {
+        fireEvent.pointerLeave(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+      });
     });
 
     it('should not include any event handler if trigger is disabled', () => {
@@ -240,26 +469,59 @@ describe('<Popover />', () => {
       );
       expect(queryByTestId('popover-element')).toBeInTheDocument();
       expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+      act(() => {
+        fireEvent.click(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+
+        fireEvent.blur(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+
+        fireEvent.focus(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+
+        fireEvent.pointerOver(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+
+        fireEvent.pointerLeave(getByTestId('popover-element'));
+        jest.runAllTimers();
+        expect(queryByTestId('popover-element')).toBeInTheDocument();
+        expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+      });
+    });
+  });
 
-      fireEvent.click(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
-
-      fireEvent.blur(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
-
-      fireEvent.focus(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+  it('should work with an external trigger via triggerRef', () => {
+    const TestRef = ({ children }) => {
+      const ref = React.useRef();
+      return children(ref);
+    };
 
-      fireEvent.mouseOver(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+    const { getByTestId, queryByTestId } = render(
+      <TestRef>
+        {(ref) => (
+          <>
+            <button ref={ref} data-testid="trigger" />
+            <Popover triggerRef={ref} popoverContent={<div />}>
+              Test message
+            </Popover>
+          </>
+        )}
+      </TestRef>
+    );
 
-      fireEvent.mouseOut(getByTestId('popover-element'));
-      expect(queryByTestId('popover-element')).toBeInTheDocument();
-      expect(queryByTestId('popover-wrapper')).not.toBeInTheDocument();
+    act(() => {
+      expect(queryByTestId('popover-element')).not.toBeInTheDocument();
+      fireEvent.pointerOver(getByTestId('trigger'));
+      jest.runAllTimers();
+      expect(queryByTestId('popover-wrapper')).toBeInTheDocument();
     });
   });
 
diff --git a/src/components/Popover/styles.css b/src/components/Popover/styles.css
index efd85ff9e..cf67be23d 100644
--- a/src/components/Popover/styles.css
+++ b/src/components/Popover/styles.css
@@ -87,7 +87,7 @@
 }
 
 .aui--popover-wrapper .aui--popover-arrow[data-placement*='top']::after {
-  top: -7px;
+  top: -6px;
   right: 6px;
   border-top-width: 6px;
   border-right-width: 6px;
@@ -97,6 +97,39 @@
   border-left-color: transparent;
 }
 
+.aui--popover-wrapper .aui--popover-hover-region {
+  width: 100%;
+  height: 7px;
+  position: absolute;
+  z-index: -1;
+
+  &[data-placement*='left'] {
+    right: 0;
+    top: 0;
+    margin-right: -7px;
+    height: 100%;
+    width: 7px;
+  }
+
+  &[data-placement*='right'] {
+    left: 0;
+    top: 0;
+    margin-left: -7px;
+    height: 100%;
+    width: 7px;
+  }
+
+  &[data-placement*='bottom'] {
+    top: -7px;
+    margin-bottom: -7px;
+  }
+
+  &[data-placement*='top'] {
+    bottom: -7px;
+    margin-top: -7px;
+  }
+}
+
 .aui--popover-wrapper .aui--popover-arrow[data-placement*='left'],
 .aui--popover-wrapper .aui--popover-arrow[data-placement*='right'] {
   width: 6px;
@@ -110,7 +143,7 @@
 }
 
 .aui--popover-wrapper .aui--popover-arrow[data-placement*='left'] {
-  right: -1px;
+  right: 0;
   margin-right: -6px;
   border-left-width: 6px;
   border-top-width: 6px;
@@ -122,7 +155,7 @@
 
 .aui--popover-wrapper .aui--popover-arrow[data-placement*='left']::after {
   top: -6px;
-  left: -7px;
+  left: -6px;
   border-left-width: 6px;
   border-top-width: 6px;
   border-bottom-width: 6px;
@@ -132,7 +165,7 @@
 }
 
 .aui--popover-wrapper .aui--popover-arrow[data-placement*='bottom'] {
-  top: -7px;
+  top: -6px;
   margin-bottom: -6px;
   border-bottom-width: 6px;
   border-right-width: 6px;
@@ -154,7 +187,7 @@
 }
 
 .aui--popover-wrapper .aui--popover-arrow[data-placement*='right'] {
-  margin-left: -7px;
+  margin-left: -6px;
   left: 0;
   border-right-width: 6px;
   border-top-width: 6px;
@@ -166,7 +199,7 @@
 
 .aui--popover-wrapper .aui--popover-arrow[data-placement*='right']::after {
   top: -6px;
-  left: 1px;
+  left: 0;
   border-right-width: 6px;
   border-top-width: 6px;
   border-bottom-width: 6px;
diff --git a/src/components/Popover/usePopover.js b/src/components/Popover/usePopover.js
new file mode 100644
index 000000000..2bfa5e927
--- /dev/null
+++ b/src/components/Popover/usePopover.js
@@ -0,0 +1,201 @@
+import _ from 'lodash';
+import React from 'react';
+
+const usePopover = ({
+  triggers,
+  triggerRef: triggerRefProp,
+  isMenu,
+  isOpen: isOpenProp,
+  onClickOutside: onClickOutsideProp,
+  onOpenChange,
+  contentHoverable,
+  delayHide,
+  delayShow,
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(isOpenProp);
+  const openStateRef = React.useRef(isPopoverOpen);
+  const triggerRefInternal = React.useRef();
+  const triggerRef = triggerRefProp ?? triggerRefInternal;
+  const isControlled = !_.isUndefined(isOpenProp);
+  const isDisabled = triggers.includes('disabled');
+
+  const [popperNode, setPopperNode] = React.useState(null);
+  const triggerSourceRef = React.useRef(null);
+  const delayRef = React.useRef();
+  const pointerMoveOpenedRef = React.useRef();
+
+  // handle setting open state and calling onOpenChange
+  const setIsOpen = React.useCallback(
+    (value, ...args) => {
+      const onChangeCaller = (val, ...onChangeArgs) => {
+        if (onOpenChange) {
+          if (!_.isEqual(openStateRef.current, val)) {
+            onOpenChange(val, ...onChangeArgs);
+          }
+        }
+        openStateRef.current = value;
+      };
+
+      setIsPopoverOpen(value);
+
+      onChangeCaller(value, ...args);
+    },
+    [onOpenChange]
+  );
+
+  const closePopover = React.useCallback(
+    (event, immediate) => {
+      clearTimeout(delayRef.current);
+      const delay = immediate ? null : delayHide;
+      pointerMoveOpenedRef.current = false;
+      const { type } = event;
+
+      if (delay) {
+        delayRef.current = setTimeout(() => {
+          setIsOpen(false, event, type);
+        }, delay);
+      } else {
+        setIsOpen(false, event, type);
+      }
+    },
+    [delayHide, setIsOpen]
+  );
+
+  const openPopover = React.useCallback(
+    (event, immediate) => {
+      const delay = immediate ? null : delayShow;
+      if (pointerMoveOpenedRef.current) return;
+      clearTimeout(delayRef.current);
+
+      const { type } = event;
+      pointerMoveOpenedRef.current = true;
+
+      if (delay) {
+        delayRef.current = setTimeout(() => {
+          triggerSourceRef.current = type;
+          setIsOpen(true, event, type);
+        }, delay);
+      } else {
+        triggerSourceRef.current = type;
+        setIsOpen(true, event, type);
+      }
+    },
+    [delayShow, setIsOpen]
+  );
+
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(delayRef.current);
+    };
+  }, []);
+
+  // keep state synced with isOpen prop
+  React.useEffect(() => {
+    if (isControlled && openStateRef.current !== isOpenProp) {
+      // openStateRef.current = isOpenProp;
+      isOpenProp ? openPopover({}) : closePopover({});
+    }
+  }, [isControlled, openPopover, closePopover, isOpenProp]);
+
+  const onClickOutside = React.useCallback(
+    (event) => {
+      onClickOutsideProp?.(event);
+      if (event.defaultPrevented) return;
+      closePopover(event);
+    },
+    [closePopover, onClickOutsideProp]
+  );
+
+  const togglePopover = React.useCallback(
+    (event) => {
+      if (!isPopoverOpen) {
+        openPopover(event);
+      } else {
+        closePopover(event);
+      }
+    },
+    [closePopover, isPopoverOpen, openPopover]
+  );
+
+  // handle keeping popover open when hovering content
+  // and closing when leaving content
+  React.useEffect(() => {
+    if (!contentHoverable || !_.includes(triggers, 'hover')) return;
+    const onNodeEnter = (event) => {
+      if (!pointerMoveOpenedRef.current) {
+        openPopover(event, true);
+      }
+    };
+
+    const onNodeLeave = (event) => {
+      if (pointerMoveOpenedRef.current) {
+        closePopover(event);
+        pointerMoveOpenedRef.current = false;
+      }
+    };
+
+    if (popperNode) {
+      popperNode.addEventListener('pointerenter', onNodeEnter);
+      popperNode.addEventListener('pointerleave', onNodeLeave);
+    }
+
+    return () => {
+      if (popperNode) {
+        popperNode.removeEventListener('pointerenter', onNodeEnter);
+        popperNode.removeEventListener('pointerleave', onNodeLeave);
+      }
+    };
+  }, [closePopover, openPopover, contentHoverable, popperNode, triggers]);
+
+  // add trigger listeners
+  React.useEffect(() => {
+    if (isDisabled) return;
+    const isHoverMenu = triggers.includes('hover') && isMenu;
+    const trigger = triggerRef?.current;
+
+    // some additional rules are enforced here:
+    // - hover menus should be clickable for keyboard usage
+    // - menus should not open on focus, as they will re-focus the trigger on unmount,
+    //   causing an infinite loop
+    if (trigger) {
+      if (triggers.includes('click') || isHoverMenu) {
+        trigger.addEventListener('click', togglePopover);
+      }
+
+      if (triggers.includes('focus') && !isMenu) {
+        trigger.addEventListener('focusin', openPopover);
+        trigger.addEventListener('focusout', closePopover);
+      }
+
+      if (triggers.includes('hover')) {
+        trigger.addEventListener('pointerover', openPopover);
+        trigger.addEventListener('pointerleave', closePopover);
+      }
+    }
+
+    return () => {
+      if (trigger) {
+        trigger.removeEventListener('click', togglePopover);
+        trigger.removeEventListener('focusin', openPopover);
+        trigger.removeEventListener('focusout', closePopover);
+        trigger.removeEventListener('pointerover', openPopover);
+        trigger.removeEventListener('pointerleave', closePopover);
+      }
+    };
+  }, [triggers, isDisabled, triggerRef, togglePopover, openPopover, closePopover, isMenu]);
+
+  return {
+    popperNode,
+    onClickOutside,
+    triggerRef,
+    withRefProps: {
+      isOpen: isPopoverOpen,
+      popperRef: setPopperNode,
+      hasHoverRegion: contentHoverable,
+    },
+    closePopover,
+    triggerSource: triggerSourceRef.current,
+  };
+};
+
+export default usePopover;
diff --git a/www/containers/props.json b/www/containers/props.json
index 7d97e0d0c..e95a50347 100644
--- a/www/containers/props.json
+++ b/www/containers/props.json
@@ -3635,6 +3635,60 @@
           "required": false,
           "description": ""
         },
+        "delayShow": {
+          "type": {
+            "name": "number"
+          },
+          "required": false,
+          "description": "hover show delay in ms",
+          "defaultValue": {
+            "value": "0",
+            "computed": false
+          }
+        },
+        "delayHide": {
+          "type": {
+            "name": "number"
+          },
+          "required": false,
+          "description": "hover hide delay in ms",
+          "defaultValue": {
+            "value": "0",
+            "computed": false
+          }
+        },
+        "contentHoverable": {
+          "type": {
+            "name": "bool"
+          },
+          "required": false,
+          "description": "when used with the hover trigger, hovering the popover content\nwill keep the popover open.\n\nPopover will close when mousing out of the popover content.\n\nFor the best UX, use with `delayHide` of at least 200",
+          "defaultValue": {
+            "value": "false",
+            "computed": false
+          }
+        },
+        "isMenu": {
+          "type": {
+            "name": "bool"
+          },
+          "required": false,
+          "description": "when true:\n- the popover content will be focused after opening\n- the popover content will trap focus\n- the popover trigger will re-focus on close"
+        },
+        "onOpenChange": {
+          "type": {
+            "name": "func"
+          },
+          "required": false,
+          "description": "callback fired when Popover open state changes\n@param {boolean} openState\n@param {object} event - event object\n@param {string} eventType - the type of event that triggered this change.\nEither a dom event (`keydown`, `pointerover`, `pointerleave`, `click`),\nor `clickOutside`, when closed via clicking outside, `disabed` when disabled trigger is applied."
+        },
+        "onClickOutside": {
+          "type": {
+            "name": "func"
+          },
+          "required": false,
+          "description": "[`isMenu`] callback called when closing on outside click"
+        },
         "arrowStyles": {
           "type": {
             "name": "object"
@@ -3712,8 +3766,8 @@
           "type": {
             "name": "node"
           },
-          "required": true,
-          "description": ""
+          "required": false,
+          "description": "children is optional when using `triggerRef`"
         },
         "triggers": {
           "type": {
@@ -3735,7 +3789,7 @@
           "required": false,
           "description": "",
           "defaultValue": {
-            "value": "'hover'",
+            "value": "['hover', 'focus']",
             "computed": false
           }
         },
@@ -3744,11 +3798,7 @@
             "name": "bool"
           },
           "required": false,
-          "description": "",
-          "defaultValue": {
-            "value": "false",
-            "computed": false
-          }
+          "description": ""
         },
         "getContainer": {
           "type": {
@@ -3757,9 +3807,28 @@
           "required": false,
           "description": ""
         },
-        "popperRef": {
+        "anchorRef": {
           "type": {
-            "name": "func"
+            "name": "shape",
+            "value": {
+              "current": {
+                "name": "any",
+                "required": false
+              }
+            }
+          },
+          "required": false,
+          "description": ""
+        },
+        "triggerRef": {
+          "type": {
+            "name": "shape",
+            "value": {
+              "current": {
+                "name": "any",
+                "required": false
+              }
+            }
           },
           "required": false,
           "description": ""
@@ -3864,14 +3933,6 @@
           "required": false,
           "description": ""
         },
-        "boundariesElement": {
-          "type": {
-            "name": "instanceOf",
-            "value": "Element"
-          },
-          "required": false,
-          "description": ""
-        },
         "title": {
           "type": {
             "name": "string"
@@ -3892,6 +3953,13 @@
           },
           "required": false,
           "description": ""
+        },
+        "hasHoverRegion": {
+          "type": {
+            "name": "bool"
+          },
+          "required": false,
+          "description": ""
         }
       }
     }
diff --git a/www/examples/Popover.mdx b/www/examples/Popover.mdx
index ea1744e72..7d324ad6b 100644
--- a/www/examples/Popover.mdx
+++ b/www/examples/Popover.mdx
@@ -6,7 +6,13 @@ import { popoverPlacements, themes } from '../../src/components/Popover/constant
 
 ```jsx live=true
 <div style={{ width: 150, display: 'flex', justifyContent: 'space-between' }}>
-  <Popover placement="right" title="Popover Title" theme="dark" popoverContent="My initial positioning is right">
+  <Popover
+    delayHide={200}
+    placement="right"
+    title="Popover Title"
+    theme="dark"
+    popoverContent="My initial positioning is right"
+  >
     <Button>Hover Me</Button>
   </Popover>
   <Popover
@@ -21,14 +27,59 @@ import { popoverPlacements, themes } from '../../src/components/Popover/constant
 </div>
 ```
 
-<br />
+## hoverable Popover
 
-## Popover.WithRef
+Setting `contentHoverable` keeps the popover open when hovering over its content.  
+A small `delayHide` can help prevent unintended closes.  
+Use `isMenu` if the content is interactable.
 
-<h4>There might be use cases where the element which will display the popover will be decided on the fly.</h4>
-<h4>
-  We support the implementation of dynamic popovers via <b>Popover.WithRef</b>
-</h4>
+```jsx live=true
+const Input = () => {
+  const [value, setValue] = React.useState('');
+  const onChange = (e) => {
+    setValue(e.target.value);
+  };
+  return <input className="form-control" type="text" onChange={onChange} value={value} />;
+};
+
+const Example = () => {
+  const [open, setIsOpen] = React.useState();
+  const onOpen = (open, event, eventType) => {
+    setIsOpen(open);
+  };
+  return (
+    <div style={{ width: 150, display: 'flex', justifyContent: 'space-between' }}>
+      <Popover
+        delayHide={200}
+        isMenu
+        isOpen={open}
+        onOpenChange={onOpen}
+        contentHoverable
+        placement="bottom-start"
+        theme="light"
+        popoverContent={
+          <div>
+            <h4>Hoverable popover</h4>
+            <p>You can keep this popover open</p>
+            <p>by hovering over it.</p>
+            <div style={{ display: 'flex' }}>
+              <Input />
+              <Button onClick={() => onOpen(false)}>Save</Button>
+            </div>
+          </div>
+        }
+      >
+        <Button variant="link">Hover me</Button>
+      </Popover>
+    </div>
+  );
+};
+render(<Example />);
+```
+
+<br />
+
+This example shows how to use an external trigger with `triggerRef` and an external anchor with `anchorRef`.
 
 ```jsx live=true
 const myRef = React.createRef(null);
@@ -36,10 +87,10 @@ const myRef = React.createRef(null);
 const Example = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const togglePopover = () => setIsOpen(!isOpen);
-
+  const triggerRef = React.useRef();
   return (
     <React.Fragment>
-      <Button onClick={togglePopover}>Toggle Popover</Button>
+      <button ref={triggerRef}>Toggle Popover</button>
       <div
         style={{
           width: 100,
@@ -52,16 +103,17 @@ const Example = () => {
       >
         External Anchor
       </div>
-      {isOpen && (
-        <Popover.WithRef
-          refElement={myRef.current}
-          placement="right"
-          title="Popover title"
-          theme="dark"
-          popoverContent="My initial positioning is right"
-          isOpen={isOpen}
-        />
-      )}
+
+      <Popover
+        triggers="hover"
+        contentHoverable
+        anchorRef={myRef}
+        triggerRef={triggerRef}
+        placement="right"
+        title="Popover title"
+        theme="dark"
+        popoverContent="My initial positioning is right"
+      />
     </React.Fragment>
   );
 };