More tooltips (codesandbox#239)

* Add more tooltips for some icon-only buttons

* I noticed a very short flashing of scrollbars on the body
when the .tiny-popper container was inserted into the DOM.

Setting the container to `position: absolute` prevents this from happening.

* `npm run add` :)

* remove superfluous Tooltip

* align tooltip labels

Author: brumm

.all-contributorsrc

@@ -149,6 +149,15 @@
         "code"
       ]
     },
+    {
+      "login": "brumm",
+      "name": "Philipp Brumm",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/170500?v=4",
+      "profile": "https://github.com/brumm",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "ValentinH",
       "name": "Valentin Hervieu",

README.md

@@ -30,5 +30,6 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 | [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub>Ives van Hoorne</sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") | [<img src="https://avatars0.githubusercontent.com/u/887639?v=3" width="100px;"/><br /><sub>Donavon West</sub>](http://donavon.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=donavon "Code") | [<img src="https://avatars0.githubusercontent.com/u/5266810?v=3" width="100px;"/><br /><sub>Jeff Allen</sub>](http://www.jeffallen.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=vueu "Code") | [<img src="https://avatars0.githubusercontent.com/u/1089897?v=3" width="100px;"/><br /><sub>Ben Gummer</sub>](https://github.com/bengummer)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bengummer "Code") | [<img src="https://avatars3.githubusercontent.com/u/154732?v=3" width="100px;"/><br /><sub>James Gillmore</sub>](http://twitter.com/faceyspacey)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=faceyspacey "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afaceyspacey "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/9636410?v=4" width="100px;"/><br /><sub>Ade Viankakrisna Fadlil</sub>](https://musify.id)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=viankakrisna "Code") | [<img src="https://avatars1.githubusercontent.com/u/1854763?v=4" width="100px;"/><br /><sub>Tushar Sonawane</sub>](https://twitter.com/tushkiz)<br />[💬](#question-Tushkiz "Answering Questions") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=Tushkiz "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=Tushkiz "Documentation") [🤔](#ideas-Tushkiz "Ideas, Planning, & Feedback") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars3.githubusercontent.com/u/1239401?v=4" width="100px;"/><br /><sub>Johann Hubert Sonntagbauer</sub>](https://github.com/johann-sonntagbauer)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Ajohann-sonntagbauer "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=johann-sonntagbauer "Code") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub>Joachim Seminck</sub>](https://github.com/jseminck)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/5210019?v=4" width="100px;"/><br /><sub>Subramanya Chakravarthy</sub>](http://chakrihacker.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=chakrihacker "Code") | [<img src="https://avatars3.githubusercontent.com/u/23088?v=4" width="100px;"/><br /><sub>Robert (Robby) O'Connor</sub>](http://robby.oconnor.ninja)<br />[🚇](#infra-robbyoconnor "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars0.githubusercontent.com/u/2083930?v=4" width="100px;"/><br /><sub>Bogdan Luca</sub>](https://github.com/lbogdan)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Albogdan "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lbogdan "Code") | [<img src="https://avatars3.githubusercontent.com/u/6177621?v=4" width="100px;"/><br /><sub>Divjot Singh</sub>](http://bogas04.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bogas04 "Code") | [<img src="https://avatars3.githubusercontent.com/u/5249539?v=4" width="100px;"/><br /><sub>Jason Nall</sub>](http://www.jsonnull.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jsonnull "Code") |
+| [<img src="https://avatars3.githubusercontent.com/u/170500?v=4" width="100px;"/><br /><sub>Philipp Brumm</sub>](https://github.com/brumm)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=brumm "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/2678610?v=4" width="100px;"/><br /><sub>Valentin Hervieu</sub>](http://valentin-hervieu.fr)<br /> |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

src/app/components/Tooltip.js

@@ -4,6 +4,9 @@ import { Tooltip } from 'react-tippy';
 
 // eslint-disable-next-line
 injectGlobal`
+  .tippy-popper {
+    position: absolute;
+  }
   .tippy-tooltip [x-circle] {
     background-color: rgb(21, 24, 25) !important;
   }

src/app/components/sandbox/ModeIcons.js

@@ -130,22 +130,28 @@ const getCurrentMode = ({
   setPreviewView,
 }: Props) => {
   const both = (
-    <ViewIcon onClick={setMixedView} active={showEditor && showPreview}>
-      <EditorIcon half />
-      <PreviewIcon half />
-    </ViewIcon>
+    <Tooltip title="Show Split view">
+      <ViewIcon onClick={setMixedView} active={showEditor && showPreview}>
+        <EditorIcon half />
+        <PreviewIcon half />
+      </ViewIcon>
+    </Tooltip>
   );
 
   const editor = (
-    <ViewIcon onClick={setEditorView} active={showEditor && !showPreview}>
-      <EditorIcon />
-    </ViewIcon>
+    <Tooltip title="Show Editor view">
+      <ViewIcon onClick={setEditorView} active={showEditor && !showPreview}>
+        <EditorIcon />
+      </ViewIcon>
+    </Tooltip>
   );
 
   const preview = (
-    <ViewIcon onClick={setPreviewView} active={!showEditor && showPreview}>
-      <PreviewIcon />
-    </ViewIcon>
+    <Tooltip title="Show Preview view">
+      <ViewIcon onClick={setPreviewView} active={!showEditor && showPreview}>
+        <PreviewIcon />
+      </ViewIcon>
+    </Tooltip>
   );
 
   if (showEditor && !showPreview)
@@ -254,18 +260,18 @@ export default class ModeIcons extends React.PureComponent<Props> {
 
     return (
       <Tooltips>
-        <Tooltip title="Editor view">
+        <Tooltip title="Show Editor view">
           <ViewIcon onClick={setEditorView} active={showEditor && !showPreview}>
             <EditorIcon />
           </ViewIcon>
         </Tooltip>
-        <Tooltip title="Split view">
+        <Tooltip title="Show Split view">
           <ViewIcon onClick={setMixedView} active={showEditor && showPreview}>
             <EditorIcon half />
             <PreviewIcon half />
           </ViewIcon>
         </Tooltip>
-        <Tooltip title="Preview view">
+        <Tooltip title="Show Preview view">
           <ViewIcon
             onClick={setPreviewView}
             active={!showEditor && showPreview}

src/app/pages/Sandbox/Editor/Content/Header/ShareView.js

@@ -325,6 +325,7 @@ class ShareView extends React.PureComponent {
           HeaderComponent={Action}
           headerProps={{
             title: 'Share',
+            tooltip: 'Share sandbox',
             Icon: ShareIcon,
             moreInfo: true,
           }}

src/app/pages/Sandbox/Editor/Content/Header/index.js

@@ -219,17 +219,29 @@ export default class Header extends React.PureComponent<Props> {
                 onClick={this.toggleLike}
               />
             ))}
-          <Action onClick={this.forkSandbox} title="Fork" Icon={Fork} />
+          <Action
+            onClick={this.forkSandbox}
+            tooltip="Fork sandbox"
+            title="Fork"
+            Icon={Fork}
+          />
           <Action
             onClick={canSave ? this.massUpdateModules : null}
             placeholder={canSave ? false : 'All modules are saved'}
+            tooltip="Save sandbox"
             title="Save"
             Icon={Save}
           />
-          <Action title="Download" Icon={Download} onClick={this.zipSandbox} />
+          <Action
+            tooltip="Download sandbox"
+            title="Download"
+            Icon={Download}
+            onClick={this.zipSandbox}
+          />
           {user.jwt &&
             sandbox.owned && (
               <Action
+                tooltip="Deploy sandbox"
                 title="Deploy"
                 Icon={NowIcon}
                 onClick={this.deploySandbox}
@@ -242,7 +254,12 @@ export default class Header extends React.PureComponent<Props> {
           <Media query="(max-width: 1560px)">
             {matches =>
               matches ? (
-                <Action href={searchUrl()} Icon={SearchIcon} tooltip="Search" />
+                <Action
+                  href={searchUrl()}
+                  Icon={SearchIcon}
+                  tooltip="Search"
+                  title="Search"
+                />
               ) : (
                 <div style={{ marginRight: '0.5rem', fontSize: '.875rem' }}>
                   <HeaderSearchBar />

src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons.js

@@ -7,6 +7,7 @@ import AddFileIcon from 'react-icons/lib/go/file-symlink-file';
 import AddDirectoryIcon from 'react-icons/lib/go/file-symlink-directory';
 
 import fadeIn from 'app/utils/animation/fade-in';
+import Tooltip from 'app/components/Tooltip';
 
 import { Icon } from '../../../Icon';
 
@@ -43,24 +44,32 @@ export default ({
     {hovering && (
       <Container>
         {onEdit && (
-          <Icon onClick={handleClick(onEdit)}>
-            <EditIcon />
-          </Icon>
+          <Tooltip title="Edit">
+            <Icon onClick={handleClick(onEdit)}>
+              <EditIcon />
+            </Icon>
+          </Tooltip>
         )}
         {onCreateFile && (
-          <Icon onClick={handleClick(onCreateFile)}>
-            <AddFileIcon />
-          </Icon>
+          <Tooltip title="New Module">
+            <Icon onClick={handleClick(onCreateFile)}>
+              <AddFileIcon />
+            </Icon>
+          </Tooltip>
         )}
         {onCreateDirectory && (
-          <Icon onClick={handleClick(onCreateDirectory)}>
-            <AddDirectoryIcon />
-          </Icon>
+          <Tooltip title="New Directory">
+            <Icon onClick={handleClick(onCreateDirectory)}>
+              <AddDirectoryIcon />
+            </Icon>
+          </Tooltip>
         )}
         {onDelete && (
-          <Icon onClick={handleClick(onDelete)}>
-            <CrossIcon />
-          </Icon>
+          <Tooltip title="Delete">
+            <Icon onClick={handleClick(onDelete)}>
+              <CrossIcon />
+            </Icon>
+          </Tooltip>
         )}
       </Container>
     )}