diff --git a/.storybook/config.js b/.storybook/config.js
index dfa673a964f5037d9bc154c0cc30e1f6d972dfd8..050223d4a5964b9da08ed370bc3ee14d4fbd17ca 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -9,6 +9,7 @@ import modal from '../components/base/modal.vue';
 
 // Import your custom directives.
 import vModal from '../directives/modal';
+import vTooltip from '../directives/tooltip';
 
 // Register custom components.
 Vue.component('gl-progress-bar', progressBar);
@@ -16,11 +17,13 @@ Vue.component('gl-modal', modal);
 
 // Register custom directives.
 Vue.directive('gl-modal', vModal);
+Vue.directive('gl-tooltip', vTooltip);
 
 function loadStories() {
   // You can require as many stories as you need.
   require('../stories/base/progress_bar');
   require('../stories/base/modal');
+  require('../stories/tooltip');
 }
 
 setOptions({
diff --git a/directives/tooltip.js b/directives/tooltip.js
new file mode 100644
index 0000000000000000000000000000000000000000..4ec61e8e56a62168c5a0befc82113f55341deb37
--- /dev/null
+++ b/directives/tooltip.js
@@ -0,0 +1,3 @@
+import Tooltip from 'bootstrap-vue/es/directives/tooltip/tooltip';
+
+export default Tooltip;
diff --git a/stories/tooltip.js b/stories/tooltip.js
new file mode 100644
index 0000000000000000000000000000000000000000..f7fe80d757465812a96fd5a8858612da2d7734e9
--- /dev/null
+++ b/stories/tooltip.js
@@ -0,0 +1,25 @@
+import { storiesOf } from '@storybook/vue';
+
+function makeTooltip(modifier = '') {
+  return () => ({
+    template: `
+      <div class="d-flex align-items-center justify-content-center p-5 m-5">
+        <button
+          v-gl-tooltip${modifier}
+          title="some tooltip text"
+        >
+            Tooltip
+        </button>
+      </div>
+    `,
+    mounted() {
+      this.$el.querySelector('button').focus()
+    }
+  });
+}
+
+storiesOf('tooltip', module)
+  .add('defaults to top', makeTooltip())
+  .add('to the right', makeTooltip('.right'))
+  .add('to the bottom', makeTooltip('.bottom'))
+  .add('to the left', makeTooltip('.left'));
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-defaults-to-top-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-defaults-to-top-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6df59e1d4c3ff145f1423f967720eed2d8f32b4
Binary files /dev/null and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-defaults-to-top-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-to-the-bottom-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-to-the-bottom-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9d0b708d7537242bd4b5ddd0bf01de0f5cc6a21
Binary files /dev/null and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-to-the-bottom-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-to-the-left-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-to-the-left-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6e1bd0c41c893147968529ef30abdc3060e9d20
Binary files /dev/null and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-to-the-left-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-to-the-right-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-to-the-right-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6bdb90872cf41ff32a54aa4b961bcd7da0a38bc
Binary files /dev/null and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tooltip-to-the-right-1-snap.png differ
diff --git a/tests/config.js b/tests/config.js
index 2416629999579b292c6ec628e078e1800d5aa0d9..a3a29e20136557741e9bca31f016fee32726e55c 100644
--- a/tests/config.js
+++ b/tests/config.js
@@ -1,3 +1,4 @@
 export const timeoutStoryBeforeScreenshot = [
   'modal',
+  'tooltip',
 ];