feat(ui) - tooltip pointer positioning

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
                     />
                   }

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
       />

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 }

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 }