✨ Site > Add tooltips

site/src/components/alert/script.js

@@ -1,7 +1,14 @@
+import Tooltip from '@/components/tooltip'
+
 export default
 {
     name: 'alert',
 
+    components:
+    {
+        Tooltip
+    },
+
     methods:
     {
         onAlertClick()

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>

site/src/components/chat/script.js

@@ -1,7 +1,14 @@
+import Tooltip from '@/components/tooltip'
+
 export default
 {
     name: 'chat',
 
+    components:
+    {
+        Tooltip
+    },
+
     data()
     {
         return {

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

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:

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>

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()

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>

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>

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

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

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>