diff --git a/site/src/components/alert/script.js b/site/src/components/alert/script.js
index f2bab88..60231b3 100644
--- a/site/src/components/alert/script.js
+++ b/site/src/components/alert/script.js
@@ -1,7 +1,14 @@
+import Tooltip from '@/components/tooltip'
+
 export default
 {
     name: 'alert',
 
+    components:
+    {
+        Tooltip
+    },
+
     methods:
     {
         onAlertClick()
diff --git a/site/src/components/alert/template.html b/site/src/components/alert/template.html
index 77a49a0..77ddfe0 100644
--- a/site/src/components/alert/template.html
+++ b/site/src/components/alert/template.html
@@ -2,4 +2,5 @@
     <span class="stroke"></span>
     <img class="icon default" src="../../../static/svg/alert.svg" alt="">
     <img class="icon hover" src="../../../static/svg/alert-hover.svg" alt="">
+    <tooltip position="top-left">It's going too fast? Send an alert to<br>the presenter (use wisely)</tooltip>
 </a>
\ No newline at end of file
diff --git a/site/src/components/chat/script.js b/site/src/components/chat/script.js
index 8225bc5..1eea926 100644
--- a/site/src/components/chat/script.js
+++ b/site/src/components/chat/script.js
@@ -1,7 +1,14 @@
+import Tooltip from '@/components/tooltip'
+
 export default
 {
     name: 'chat',
 
+    components:
+    {
+        Tooltip
+    },
+
     data()
     {
         return {
diff --git a/site/src/components/chat/template.html b/site/src/components/chat/template.html
index caa8258..92ee653 100644
--- a/site/src/components/chat/template.html
+++ b/site/src/components/chat/template.html
@@ -5,6 +5,7 @@
         <img v-if="unreadCount === 0" class="icon default" src="../../../static/svg/chat-star.svg" alt="">
         <img v-if="unreadCount > 0" class="icon hover" src="../../../static/svg/chat-star-hover.svg" alt="">
         <span v-if="unreadCount > 0" class="unread">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
+        <tooltip position="top-left">Chat with other person on the project</tooltip>
     </a>
     <div class="content" v-show="open">
         <a href="#" class="header" @click="onHeaderClick">
diff --git a/site/src/components/file/script.js b/site/src/components/file/script.js
index 0e95bcb..44e6064 100644
--- a/site/src/components/file/script.js
+++ b/site/src/components/file/script.js
@@ -1,5 +1,6 @@
 import Versions from '@/components/versions'
 import Viewer from '@/components/viewer'
+import Tooltip from '@/components/tooltip'
 import copyToClipboard from 'copy-to-clipboard'
 
 export default
@@ -9,7 +10,8 @@ export default
     components:
     {
         Versions,
-        Viewer
+        Viewer,
+        Tooltip
     },
 
     computed:
diff --git a/site/src/components/file/template.html b/site/src/components/file/template.html
index 984a37b..69ba95d 100644
--- a/site/src/components/file/template.html
+++ b/site/src/components/file/template.html
@@ -1,32 +1,5 @@
 <div class="file" :class="[versionsActive && isCode ? 'version-active' : '']">
 
-    <!-- Header -->
-    <header>
-
-        <div class="path"><span class="directory">{{ content.path.directory }}/</span><span class="name">{{ content.name }}</span></div>
-
-        <a class="versions-toggle" :class="[versionsActive ? 'active' : '']" href="#" @click.prevent="onVersionsClick" v-if="isCode">
-            <img class="icon default" src="../../../static/svg/versions.svg" alt="">
-            <img class="icon hover" src="../../../static/svg/versions-hover.svg" alt="">
-        </a>
-
-        <a class="differences-toggle" :class="[differencesActive ? 'active' : '']" href="#" @click.prevent="onDifferencesClick" v-if="isCode">
-            <img class="icon default" src="../../../static/svg/differences.svg" alt="">
-            <img class="icon hover" src="../../../static/svg/differences-hover.svg" alt="">
-        </a>
-
-        <a class="copy" :class="[copied ? 'active' : '']" href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">
-            <img class="icon default" src="../../../static/svg/copy.svg" alt="">
-            <img class="icon hover" src="../../../static/svg/copy-hover.svg" alt="">
-        </a>
-
-        <a class="download" :href="downloadUrl" download>
-            <img class="icon default" src="../../../static/svg/download.svg" alt="">
-            <img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
-        </a>
-
-    </header>
-
     <!-- Versions -->
     <versions :file="content" :content="content.versions" v-if="versionsActive && isCode"></versions>
 
@@ -45,4 +18,36 @@
         <br>Sorry, I can't read this file.
         <br>But you can <a :href="downloadUrl" download>download it</a>
     </div>
+
+    <!-- Header -->
+    <header>
+
+        <div class="path"><span class="directory">{{ content.path.directory }}/</span><span class="name">{{ content.name }}</span></div>
+
+        <a class="versions-toggle" :class="[versionsActive ? 'active' : '']" href="#" @click.prevent="onVersionsClick" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/versions.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/versions-hover.svg" alt="">
+            <tooltip position="bottom-right">Toggle the revision history</tooltip>
+        </a>
+
+        <a class="differences-toggle" :class="[differencesActive ? 'active' : '']" href="#" @click.prevent="onDifferencesClick" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/differences.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/differences-hover.svg" alt="">
+            <tooltip position="bottom-right">Toggle the line-by-line differences</tooltip>
+        </a>
+
+        <a class="copy" :class="[copied ? 'active' : '']" href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/copy.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/copy-hover.svg" alt="">
+            <tooltip position="bottom">Copy to clipboard</tooltip>
+        </a>
+
+        <a class="download" :href="downloadUrl" download>
+            <img class="icon default" src="../../../static/svg/download.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
+            <tooltip position="bottom-left">Download the latest version of the file</tooltip>
+        </a>
+
+    </header>
+
 </div>
\ No newline at end of file
diff --git a/site/src/components/projects-hub/script.js b/site/src/components/projects-hub/script.js
index 09dbfcf..4f371be 100644
--- a/site/src/components/projects-hub/script.js
+++ b/site/src/components/projects-hub/script.js
@@ -1,7 +1,14 @@
+import Tooltip from '@/components/tooltip'
+
 export default
 {
     name: 'projects-hub',
 
+    components:
+    {
+        Tooltip
+    },
+
     computed:
     {
         projects()
diff --git a/site/src/components/projects-hub/template.html b/site/src/components/projects-hub/template.html
index b7dd915..2ff38dc 100644
--- a/site/src/components/projects-hub/template.html
+++ b/site/src/components/projects-hub/template.html
@@ -21,6 +21,7 @@
     <a class="download" :href="downloadUrl" download>
         <img class="icon default" src="../../../static/svg/download.svg" alt="">
         <img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
+        <tooltip position="right">Download the whole project</tooltip>
     </a>
 
 </div>
\ No newline at end of file
diff --git a/site/src/components/tooltip/index.vue b/site/src/components/tooltip/index.vue
new file mode 100644
index 0000000..246515d
--- /dev/null
+++ b/site/src/components/tooltip/index.vue
@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>
\ No newline at end of file
diff --git a/site/src/components/tooltip/script.js b/site/src/components/tooltip/script.js
new file mode 100644
index 0000000..426efa5
--- /dev/null
+++ b/site/src/components/tooltip/script.js
@@ -0,0 +1,16 @@
+export default
+{
+    name: 'tooltip',
+
+    props:
+    {
+        position: {
+            type: String,
+            default: 'top',
+            validator(value)
+            {
+                return ['top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left'].indexOf(value) !== -1
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/site/src/components/tooltip/style.styl b/site/src/components/tooltip/style.styl
new file mode 100644
index 0000000..4051344
--- /dev/null
+++ b/site/src/components/tooltip/style.styl
@@ -0,0 +1,96 @@
+.tooltip
+    position absolute
+    top 0
+    right 0
+    bottom 0
+    left 0
+
+    .content
+        position absolute
+        padding-top 6px
+        padding-right 8px
+        padding-bottom 7px
+        padding-left 8px
+        background #1E202F
+        border 1px solid #586ca2
+        white-space nowrap
+        font-size 12px
+        line-height 1em
+        pointer-events none
+        opacity 0
+        transition opacity 0.15s
+        will-change opacity
+        color #fff
+
+    .arrow
+        position absolute
+        width 10px
+        height 10px
+        overflow hidden
+
+        .inner
+            position absolute
+            top 0
+            left 6px
+            width 10px
+            height 10px
+            background #1E202F
+            border 1px solid #586ca2
+            transform rotate(45deg)
+
+    &.top-left
+        .content
+            right 8px
+            bottom calc(100% + 5px)
+
+        .arrow
+            right 8px
+            top 100%
+            transform rotate(-90deg)
+
+    &.right
+        .content
+            transform translateY(-50%)
+            top 50%
+            left calc(100% + 5px)
+
+        .arrow
+            margin-top -5px
+            top 50%
+            right 100%
+
+    &.bottom-right
+        .content
+            left 8px
+            top calc(100% + 5px)
+
+        .arrow
+            left 8px
+            bottom 100%
+            transform rotate(90deg)
+
+    &.bottom
+        .content
+            transform translateX(-50%)
+            left 50%
+            top calc(100% + 5px)
+
+        .arrow
+            margin-left -5px
+            left 50%
+            bottom 100%
+            transform rotate(90deg)
+
+    &.bottom-left
+        .content
+            right 8px
+            top calc(100% + 5px)
+
+        .arrow
+            right 8px
+            bottom 100%
+            transform rotate(90deg)
+
+    &:hover
+        .content
+            opacity 1
\ No newline at end of file
diff --git a/site/src/components/tooltip/template.html b/site/src/components/tooltip/template.html
new file mode 100644
index 0000000..13bce02
--- /dev/null
+++ b/site/src/components/tooltip/template.html
@@ -0,0 +1,6 @@
+<div class="tooltip" :class="`${position}`">
+    <div class="content">
+        <div class="arrow"><div class="inner"></div></div>
+        <slot></slot>
+    </div>
+</div>
\ No newline at end of file