From 706fe741409853f8996238fb64616cb19457683e Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 9 Feb 2022 19:11:48 +0100
Subject: [PATCH] feat(ui) - tooltip pointer positioning

---
 frontend/app/components/Session_/PlayerBlockHeader.js   | 4 +++-
 frontend/app/components/shared/SharePopup/SharePopup.js | 2 +-
 frontend/app/components/ui/IconButton/IconButton.js     | 2 ++
 frontend/app/components/ui/Tooltip/Tooltip.js           | 3 ++-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js
index 9870637c3..4f31dfeb7 100644
--- a/frontend/app/components/Session_/PlayerBlockHeader.js
+++ b/frontend/app/components/Session_/PlayerBlockHeader.js
@@ -134,6 +134,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
                 <IconButton
                   className="mr-2"
                   tooltip="Bookmark"
+                  tooltipPosition="top right"
                   onClick={ this.toggleFavorite }
                   loading={ loading }
                   icon={ favorite ? 'star-solid' : 'star' }                  
@@ -146,8 +147,9 @@ export default class PlayerBlockHeader extends React.PureComponent {
                     <IconButton
                       className="mr-2"
                       tooltip="Share Session"
+                      tooltipPosition="top right"
                       disabled={ disabled }
-                      icon={ 'share-alt' }                      
+                      icon={ 'share-alt' }
                       plain
                     />
                   }
diff --git a/frontend/app/components/shared/SharePopup/SharePopup.js b/frontend/app/components/shared/SharePopup/SharePopup.js
index 347a95733..a1655e6e1 100644
--- a/frontend/app/components/shared/SharePopup/SharePopup.js
+++ b/frontend/app/components/shared/SharePopup/SharePopup.js
@@ -103,7 +103,7 @@ export default class SharePopup extends React.PureComponent {
           </div>
         }
         on="click"
-        position="top center"
+        position="top right"
         className={ styles.popup }
         hideOnScroll
       />
diff --git a/frontend/app/components/ui/IconButton/IconButton.js b/frontend/app/components/ui/IconButton/IconButton.js
index 53077f06c..eb708f21a 100644
--- a/frontend/app/components/ui/IconButton/IconButton.js
+++ b/frontend/app/components/ui/IconButton/IconButton.js
@@ -24,11 +24,13 @@ const IconButton = React.forwardRef(({
   name,
   disabled = false,
   tooltip = false,
+  tooltipPosition = 'top',
   compact = false,
   ...rest
 }, ref) => (
   <Tooltip
     tooltip={tooltip}
+    position={tooltipPosition}
     trigger={ 
       <button
         ref={ ref }
diff --git a/frontend/app/components/ui/Tooltip/Tooltip.js b/frontend/app/components/ui/Tooltip/Tooltip.js
index 50e23647b..05a723f52 100644
--- a/frontend/app/components/ui/Tooltip/Tooltip.js
+++ b/frontend/app/components/ui/Tooltip/Tooltip.js
@@ -22,7 +22,7 @@ export default class Tooltip extends React.PureComponent {
 	}
 
 	render() {
-		const { trigger, tooltip } = this.props;
+		const { trigger, tooltip, position } = this.props;
 		const { open } = this.state;
 		return (
 			<Popup
@@ -30,6 +30,7 @@ export default class Tooltip extends React.PureComponent {
 				content={ tooltip }
 				inverted
 				disabled={ !tooltip }
+				position={position}
 				trigger={
 					<span //TODO: no wrap component around
 						onMouseEnter={ this.onMouseEnter }