diff --git a/components/base/tooltip_on_truncate/examples/basic.example.vue b/components/base/tooltip_on_truncate/examples/basic.example.vue
new file mode 100644
index 0000000000000000000000000000000000000000..88f5843e567dc54e798ea8ed05c3c819c92f272d
--- /dev/null
+++ b/components/base/tooltip_on_truncate/examples/basic.example.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <gl-tooltip-on-truncate
+      style="max-width: 200px; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
+      title="This has no tooltip."
+      >This has no tooltip.</gl-tooltip-on-truncate
+      >
+    <gl-tooltip-on-truncate
+      style="max-width: 200px; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
+      title="Something really really really long. It's super long. Way too long to show."
+      >Something really really really long. It's super long. Way too long to
+      show.</gl-tooltip-on-truncate
+      >
+    </div>
+</template>
diff --git a/components/base/tooltip_on_truncate/examples/index.js b/components/base/tooltip_on_truncate/examples/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ca495488372b389059321a2ca53a20529a7a633c
--- /dev/null
+++ b/components/base/tooltip_on_truncate/examples/index.js
@@ -0,0 +1,15 @@
+import GlTruncatedTooltip from './basic.example.vue';
+
+export default [
+  {
+    name: 'Component',
+    items: [
+      {
+        id: 'tooltip-truncate-default',
+        name: 'BASIC TRUNCATION',
+        description: 'Default Truncated Tooltip Component',
+        component: GlTruncatedTooltip,
+      },
+    ],
+  },
+];
diff --git a/components/base/tooltip_on_truncate/tooltip_on_truncate.documentation.js b/components/base/tooltip_on_truncate/tooltip_on_truncate.documentation.js
new file mode 100644
index 0000000000000000000000000000000000000000..95d591e98bbf50d4fe7ff25aec8d6c3eab7760eb
--- /dev/null
+++ b/components/base/tooltip_on_truncate/tooltip_on_truncate.documentation.js
@@ -0,0 +1,8 @@
+import * as description from './tooltip_on_truncate.md';
+import examples from './examples';
+
+export default {
+  description,
+  examples,
+  bootstrapComponent: 'b-tooltip',
+};
diff --git a/components/base/tooltip_on_truncate/tooltip_on_truncate.md b/components/base/tooltip_on_truncate/tooltip_on_truncate.md
new file mode 100644
index 0000000000000000000000000000000000000000..a84bad5876aa3b3064e248d2d168af7b757b95b4
--- /dev/null
+++ b/components/base/tooltip_on_truncate/tooltip_on_truncate.md
@@ -0,0 +1,43 @@
+## Usage
+
+HELLO I AM THE TRUNCATED TOOLTIP
+
+Using the tooltip component is recommended if you have HTML content.
+It is also currently required if the tooltip content needs to change while it's visible (see [this upstream issue]).
+In all other cases, please use the directive.
+
+[this upstream issue]: https://github.com/bootstrap-vue/bootstrap-vue/issues/2142
+
+**Using the component**
+~~~js
+<gl-button ref="someButton">
+  ...
+</gl-button>
+
+<gl-tooltip :target="() => $refs.someButton">
+  some <em>tooltip<em/> text
+</gl-tooltip>
+~~~
+
+**Using the directive**
+~~~js
+<element
+  v-gl-tooltip.${modifier}
+  title="some tooltip text"
+>
+  ...
+</element>
+~~~
+
+## Directive attributes
+
+`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`].
+
+## Under the hood
+Tooltip uses [`<b-tooltip>`] and [`v-b-tooltip`] internally.
+
+The container in the examples is not needed in CE/EE, but at the moment we scope the styles for design.gitlab.com for the usage of application.css.
+
+[`<b-tooltip>`]: https://bootstrap-vue.js.org/docs/components/tooltip
+
+[`v-b-tooltip`]: https://bootstrap-vue.js.org/docs/directives/tooltip
diff --git a/components/base/tooltip_on_truncate/tooltip_on_truncate.vue b/components/base/tooltip_on_truncate/tooltip_on_truncate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d2be5a3e4a523ebdc8fd844b0d266c10370b6472
--- /dev/null
+++ b/components/base/tooltip_on_truncate/tooltip_on_truncate.vue
@@ -0,0 +1,69 @@
+<script>
+import isFunction from 'lodash/isFunction';
+import { GlTooltipDirective } from '../../../index';
+
+export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    boundary: {
+      type: String,
+      required: false,
+      default: 'viewport',
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    truncateTarget: {
+      type: [String, Function],
+      required: false,
+      default: 'child',
+    },
+  },
+  data() {
+    return {
+      showTooltip: false,
+    };
+  },
+  mounted() {
+    const target = this.selectTarget();
+    if (target && target.scrollWidth > target.offsetWidth) {
+      this.showTooltip = true;
+    }
+  },
+  methods: {
+    selectTarget() {
+      if (_.isFunction(this.truncateTarget)) {
+        return this.truncateTarget(this.$el);
+      } else if (this.truncateTarget === 'child') {
+        const child = this.$el.childNodes[0];
+
+        // We can't test dimensions of a TEXT_NODE, so default to the current element
+        return child.nodeType === Node.TEXT_NODE ? this.$el : child;
+      }
+
+      return this.$el;
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    v-if="showTooltip"
+    v-gl-tooltip="{ boundary, placement }"
+    :title="title"
+    class="js-show-tooltip"
+  >
+    <slot></slot>
+  </span>
+  <span v-else> <slot></slot> </span>
+</template>
diff --git a/documentation/components_documentation.js b/documentation/components_documentation.js
index 98a17b79eb3894496beb3a5da46e44519bdf6f00..1a237736c057d42445d60e823e8d7b8ee06c8fa8 100644
--- a/documentation/components_documentation.js
+++ b/documentation/components_documentation.js
@@ -35,6 +35,9 @@ export {
 export {
   default as GlTooltipDocumentation,
 } from '../components/base/tooltip/tooltip.documentation';
+export {
+  default as GlTooltipOnTruncateDocumentation,
+} from '../components/base/tooltip_on_truncate/tooltip_on_truncate.documentation';
 export {
   default as GlDashboardSkeletonDocumentation,
 } from '../components/regions/dashboard_skeleton/dashboard_skeleton.documentation';
diff --git a/index.js b/index.js
index 74b3b7907123794769d1530df2a9c293d94d4afd..e94845a4fffc2976c650f2cd9e77c62a9a525d98 100644
--- a/index.js
+++ b/index.js
@@ -11,6 +11,7 @@ export {
 export { default as GlBadge } from './components/base/badge/badge.vue';
 export { default as GlButton } from './components/base/button/button.vue';
 export { default as GlTooltip } from './components/base/tooltip/tooltip.vue';
+export { default as GlTooltipOnTruncate } from './components/base/tooltip_on_truncate/tooltip_on_truncate.vue';
 export {
   default as GlDashboardSkeleton,
 } from './components/regions/dashboard_skeleton/dashboard_skeleton.vue';
diff --git a/stories/base/tooltip_on_truncate.js b/stories/base/tooltip_on_truncate.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e853650997ed9eeae447ce794bced5d32f099f1
--- /dev/null
+++ b/stories/base/tooltip_on_truncate.js
@@ -0,0 +1,71 @@
+import { withKnobs, select } from '@storybook/addon-knobs';
+import documentedStoriesOf from '../utils/documented_stories';
+import readme from '../../components/base/tooltip/tooltip.md';
+import { tooltipPlacements } from '../utils/constants';
+import { GlTooltip, GlTooltipDirective } from '../../index';
+
+const directives = {
+  GlTooltipDirective,
+};
+
+const components = {
+  GlTooltip,
+};
+
+function makeTooltip(modifier = '') {
+  return () => ({
+    directives,
+    template: `
+      <div class="d-flex align-items-center justify-content-center p-5 m-5">
+        <button
+          v-gl-tooltip-directive${modifier}
+          title="some tooltip text"
+        >
+            Tooltip
+        </button>
+      </div>
+    `,
+    mounted() {
+      this.$el.querySelector('button').focus();
+    },
+  });
+}
+
+function generateProps({ placement = tooltipPlacements.top } = {}) {
+  return {
+    placement: {
+      type: String,
+      default: select('placement', tooltipPlacements, placement),
+    },
+  };
+}
+
+function generateTooltip() {
+  return () => ({
+    props: generateProps(),
+    components,
+    template: `
+      <div class="d-flex align-items-center justify-content-center p-5 m-5">
+        <button id="btn1">Tooltip</button>
+        <gl-tooltip
+          target="btn1"
+          triggers="hover focus click"
+          :placement="placement"
+        >
+          Hello <strong>World!</strong>
+        </gl-tooltip>
+      </div>
+    `,
+    mounted() {
+      this.$nextTick(() => this.$el.querySelector('button').focus());
+    },
+  });
+}
+
+documentedStoriesOf('base|tooltip_on_truncate', readme)
+  .addDecorator(withKnobs)
+  .add('defaults to top', makeTooltip())
+  .add('to the right', makeTooltip('.right'))
+  .add('to the bottom', makeTooltip('.bottom'))
+  .add('to the left', makeTooltip('.left'))
+  .add('with HTML content', generateTooltip());