From f9767ed1915fddd9efc5d608dd3575f6caa86ce2 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Mon, 30 Mar 2020 23:44:20 -0300
Subject: [PATCH] Add 'interactive' tooltip prop (#8258)

The 'interactive' prop for React Tippy will keep the tooltip open when
the user moves the mouse over the tooltip. This enables interactive
tooltips, where the user is expected to click on something in the
tooltip (e.g. a message with a link).
---
 ui/app/components/ui/tooltip-v2.js | 31 +++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/ui/app/components/ui/tooltip-v2.js b/ui/app/components/ui/tooltip-v2.js
index 24518d392..7a90f6fcc 100644
--- a/ui/app/components/ui/tooltip-v2.js
+++ b/ui/app/components/ui/tooltip-v2.js
@@ -8,6 +8,7 @@ export default class Tooltip extends PureComponent {
     children: null,
     containerClassName: '',
     html: null,
+    interactive: undefined,
     onHidden: null,
     position: 'left',
     size: 'small',
@@ -22,6 +23,7 @@ export default class Tooltip extends PureComponent {
     containerClassName: PropTypes.string,
     disabled: PropTypes.bool,
     html: PropTypes.node,
+    interactive: PropTypes.bool,
     onHidden: PropTypes.func,
     position: PropTypes.oneOf([
       'top',
@@ -39,7 +41,21 @@ export default class Tooltip extends PureComponent {
   }
 
   render () {
-    const { arrow, children, containerClassName, disabled, position, html, size, title, trigger, onHidden, wrapperClassName, style } = this.props
+    const {
+      arrow,
+      children,
+      containerClassName,
+      disabled,
+      position,
+      html,
+      interactive,
+      size,
+      title,
+      trigger,
+      onHidden,
+      wrapperClassName,
+      style,
+    } = this.props
 
     if (!title && !html) {
       return (
@@ -52,17 +68,18 @@ export default class Tooltip extends PureComponent {
     return (
       <div className={wrapperClassName}>
         <ReactTippy
-          html={html}
+          arrow={arrow}
           className={containerClassName}
           disabled={disabled}
-          title={title}
-          position={position}
-          trigger={trigger}
           hideOnClick={false}
-          size={size}
-          arrow={arrow}
+          html={html}
+          interactive={interactive}
           onHidden={onHidden}
+          position={position}
+          size={size}
           style={style}
+          title={title}
+          trigger={trigger}
         >
           {children}
         </ReactTippy>