feat(ui-overlays,ui-tooltip): expose positionTarget prop on Tooltip

refs: INSTUI-2348

TEST PLAN:
- Both Tooltip and DeprecatedTooltip should behave as before with no regressions

Change-Id: I7471aa605d84f394e7a276e9c2b82b64436fd825
Reviewed-on: https://gerrit.instructure.com/c/instructure-ui/+/215481
Reviewed-by: Ken Meleta <kmeleta@instructure.com>
Product-Review: Ken Meleta <kmeleta@instructure.com>
QA-Review: Daniel Sasaki <dsasaki@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Visual-Regression-Test: Steve Jensen <sejensen@instructure.com>

Author: serikjensen

packages/ui-overlays/src/Tooltip/index.js

@@ -30,6 +30,7 @@ import { themeable } from '@instructure/ui-themeable'
 import { deprecated } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 import { Tooltip as UITooltip } from '@instructure/ui-tooltip'
+import { element } from '@instructure/ui-prop-types'
 
 import styles from './styles.css'
 import theme from './theme'
@@ -76,6 +77,10 @@ class Tooltip extends Component {
      * for the `<Tooltip />` (defaults to `document.body`)
      */
     mountNode: LayoutPropTypes.mountNode,
+    /**
+     * Target element for positioning the Tooltip (if it differs from children/trigger)
+     */
+    positionTarget: PropTypes.oneOfType([element, PropTypes.func]),
     /**
      * The parent in which to constrain the tooltip.
      * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
@@ -89,6 +94,7 @@ class Tooltip extends Component {
     variant: 'inverse',
     placement: 'top',
     mountNode: null,
+    positionTarget: undefined,
     constrain: 'window'
   }
 
@@ -100,6 +106,7 @@ class Tooltip extends Component {
       on,
       placement,
       mountNode,
+      positionTarget,
       constrain,
       ...passthroughProps
     } = this.props
@@ -112,6 +119,7 @@ class Tooltip extends Component {
         color={variant === 'inverse' ? 'primary' : 'primary-inverse'}
         placement={placement}
         mountNode={mountNode}
+        positionTarget={positionTarget}
         constrain={constrain}
       >
         { children }

packages/ui-tooltip/src/Tooltip/index.js

@@ -38,6 +38,7 @@ import { uid } from '@instructure/uid'
 import { themeable } from '@instructure/ui-themeable'
 import { testable } from '@instructure/ui-testable'
 import { Popover } from '@instructure/ui-popover'
+import { element } from '@instructure/ui-prop-types'
 
 import styles from './styles.css'
 import theme from './theme'
@@ -114,6 +115,10 @@ class Tooltip extends Component {
      * The vertical offset for the positioned content
      */
     offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /**
+     * Target element for positioning the Tooltip (if it differs from children/trigger)
+     */
+    positionTarget: PropTypes.oneOfType([element, PropTypes.func]),
     /**
      * Callback fired when content is shown. When controlled, this callback is
      * fired when the tooltip expects to be shown
@@ -148,6 +153,7 @@ class Tooltip extends Component {
     constrain: 'window',
     offsetX: 0,
     offsetY: 0,
+    positionTarget: undefined,
     onShowContent: (event) => {},
     onHideContent: (event, { documentClick }) => {}
   }
@@ -206,6 +212,7 @@ class Tooltip extends Component {
       constrain,
       offsetX,
       offsetY,
+      positionTarget,
       onShowContent,
       onHideContent,
       tip,
@@ -235,6 +242,7 @@ class Tooltip extends Component {
         shadow="none"
         offsetX={offsetX}
         offsetY={offsetY}
+        positionTarget={positionTarget}
         renderTrigger={() => this.renderTrigger()}
         onShowContent={onShowContent}
         onHideContent={onHideContent}