diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index c3f12d3b8..ada462762 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -56,6 +56,116 @@ h3 {
   font-weight: 700;
 }
 
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+
+  .tooltip-inner {
+    background: black;
+    color: white;
+    border-radius: 16px;
+    padding: 5px 10px 4px;
+  }
+
+  .tooltip-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: black;
+    z-index: 1;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &.popover {
+    $color: #f9f9f9;
+
+    .popover-inner {
+      background: $color;
+      color: black;
+      padding: 24px;
+      border-radius: 5px;
+      box-shadow: 0 5px 30px rgba(black, .1);
+    }
+
+    .popover-arrow {
+      border-color: $color;
+    }
+  }
+
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .15s, visibility .15s;
+  }
+
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .15s;
+  }
+}
+
 h3.title {
   margin: 4px;
 }
diff --git a/components/history.vue b/components/history.vue
index 18e0f592c..f59e399a6 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -42,12 +42,12 @@
         </li>
         <div class="show-on-small-screen">
           <li>
-            <button class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
+            <button v-tooltip="'Delete'" class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
               <i class="material-icons">delete</i>
             </button>
           </li>
           <li>
-            <button class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
+            <button v-tooltip="'Edit'" class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
               <i class="material-icons">edit</i>
             </button>
           </li>
diff --git a/layouts/default.vue b/layouts/default.vue
index 5d2a35cb9..af7c4d803 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -11,7 +11,7 @@
         <nav>
           <nuxt-link to="/">HTTP</nuxt-link>
           <nuxt-link to="/websocket">WebSocket</nuxt-link>
-          <nuxt-link to="/settings" aria-label="Settings">
+          <nuxt-link v-tooltip="'Settings'" to="/settings" aria-label="Settings">
             <!-- Settings cog -->
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
               <path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/>
diff --git a/nuxt.config.js b/nuxt.config.js
index 19bc0c28a..3da26f4be 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -209,6 +209,9 @@ export default {
   plugins: [
     {
       src: '~/plugins/vuex-persist'
+    },
+    {
+      src: '~/plugins/v-tooltip'
     }
   ],
   /*
diff --git a/package-lock.json b/package-lock.json
index bec51f58f..e1440035c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7615,6 +7615,11 @@
         "find-up": "^3.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz",
+      "integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -10777,6 +10782,16 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
       "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ=="
     },
+    "v-tooltip": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.2.tgz",
+      "integrity": "sha512-xQ+qzOFfywkLdjHknRPgMMupQNS8yJtf9Utd5Dxiu/0n4HtrxqsgDtN2MLZ0LKbburtSAQgyypuE/snM8bBZhw==",
+      "requires": {
+        "lodash": "^4.17.11",
+        "popper.js": "^1.15.0",
+        "vue-resize": "^0.4.5"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -10865,6 +10880,11 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
+    "vue-resize": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
+      "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
+    },
     "vue-router": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.7.tgz",
diff --git a/package.json b/package.json
index 6b91d2346..19a8e7d9e 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
         "@nuxtjs/toast": "^3.2.1",
         "highlight.js": "^9.15.10",
         "nuxt": "^2.10.1",
+        "v-tooltip": "^2.0.2",
         "vue-virtual-scroll-list": "^1.4.2",
         "vuejs-auto-complete": "^0.9.0",
         "vuex-persist": "^2.1.0",
diff --git a/plugins/v-tooltip.js b/plugins/v-tooltip.js
new file mode 100644
index 000000000..5fcfd130c
--- /dev/null
+++ b/plugins/v-tooltip.js
@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import VTooltip from 'v-tooltip';
+
+Vue.use(VTooltip);