From 2109808d619b96e435a8145270288d11efbdfc6d Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 24 May 2022 14:54:43 +0200
Subject: [PATCH] fix(ui): fix tooltip for subheader

---
 frontend/app/components/Session_/Subheader.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index e75bc3198..b22817c95 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import { Icon, TextEllipsis, Tooltip } from 'UI';
+import { Icon } from 'UI';
 import Autoplay from './Autoplay';
 import Bookmark from 'Shared/Bookmark'
 import SharePopup from '../shared/SharePopup/SharePopup';
 import { connectPlayer } from 'Player';
 import copy from 'copy-to-clipboard';
+import { Tooltip } from 'react-tippy';
 
 function SubHeader(props) {
     const [isCopied, setCopied] = React.useState(false);
@@ -21,15 +22,20 @@ function SubHeader(props) {
                     onClick={() => {
                         copy(props.currentLocation);
                         setCopied(true)
+                        setTimeout(() => setCopied(false), 5000)
                     }}
                 >
                     <Icon size="20" name="event/link" className="mr-1" />
                     <Tooltip
-                        maxWidth={500}
+                        delay={0}
+                        arrow
+                        animation="fade"
+                        hideOnClick={false}
                         position="bottom center"
-                        trigger={location}
-                        tooltip={isCopied ? 'URL Copied to clipboard' : undefined}
-                    />
+                        title={isCopied ? 'URL Copied to clipboard' : 'Click to copy'}
+                    >
+                        {location}
+                    </Tooltip>
                 </div>
             )}
             <div className="ml-auto flex items-center color-gray-medium" style={{ width: 'max-content' }}>