diff --git a/.storybook/preview.js b/.storybook/preview.js
index f35dd8665..9f0c252d6 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -5,10 +5,16 @@ import PrimeVue from 'primevue/config';
 
 import '@/assets/styles/main.scss';
 import 'primeicons/primeicons.css';
+import Tooltip from 'primevue/tooltip';
+import { TooltipPassThrough } from '@/components/Tooltip';
 
 setup((app) => {
   app.use(configs.constants);
-  app.use(PrimeVue, { unstyled: true });
+  app.use(PrimeVue, {
+    unstyled: true,
+    pt: { directives: { tooltip: TooltipPassThrough } }
+  });
+  app.directive('tooltip', Tooltip);
   for (const mixinName in mixins) {
     const mixin = mixins[mixinName];
     app.mixin(mixin);
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d610e631..2bbacc5e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## v2.0.80
+
+- Add PrimeVue `tooltip` directive to plugin installation
+
+### Breaking Changes
+
+- Removes `Tooltip` component
+- Adds a dependency on PrimeVue plugin installation prior to `ui-component` plugin installation
+
 ## v2.0.79
 
 - Make `Modal`s scrollable when overflow
diff --git a/package-lock.json b/package-lock.json
index e923cfbcf..62f08f65f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.79",
+  "version": "2.0.80",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "2.0.79",
+      "version": "2.0.80",
       "dependencies": {
         "date-fns": "^2.29.3",
         "date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index 605a34415..2508404db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.79",
+  "version": "2.0.80",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index ee5ab48af..7f3a04c83 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -79,7 +79,6 @@
   }
 }
 
-// This is a hack for the modal styles flashing.
 @keyframes fadeIn {
   from {
     opacity: 0;
diff --git a/src/components/Label/Label.stories.js b/src/components/Label/Label.stories.js
index 7efa90565..791670116 100644
--- a/src/components/Label/Label.stories.js
+++ b/src/components/Label/Label.stories.js
@@ -2,7 +2,6 @@ import LobLabel from './Label.vue';
 import mdx from './Label.mdx';
 
 import { Info } from '@/components/Icons';
-import Tooltip from '@/components/Tooltip/Tooltip.vue';
 
 export default {
   title: 'Components/Label',
@@ -80,19 +79,11 @@ RequiredField.args = {
 
 const WithTooltipTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { LobLabel, Info, Tooltip },
+  components: { LobLabel, Info },
   setup: () => ({ args }),
   template: `
     <lob-label v-bind="args">
       <template v-slot:tooltip>
-        <Tooltip position="bottom">
-          <template #trigger>
-            <Info class="w-5 h-5" />
-          </template>
-          <template #content>
-            {{ args.tooltipContent }}
-          </template>
-        </Tooltip>
       </template>
     </lob-label>
     <input class="border rounded p-2 text-gray-500" />
diff --git a/src/components/Label/Label.vue b/src/components/Label/Label.vue
index 1c3870a03..55230cfbf 100644
--- a/src/components/Label/Label.vue
+++ b/src/components/Label/Label.vue
@@ -10,23 +10,19 @@
     ]"
     data-testid="labelWrapper"
   >
-    <Tooltip
+    <span
       v-if="tooltipContent"
-      position="bottom"
-      :class="['text-gray-500', { 'mr-1': tooltipPosition === 'leading' }]"
-      :data-testid="
-        tooltipPosition === 'trailing' ? 'tooltip-trailing' : 'tooltip-leading'
-      "
+      v-tooltip.bottom="tooltipContent"
+      data-testid="uic-tooltip-icon"
+      :class="[
+        'text-gray-500',
+        {
+          'mr-1': tooltipContent && tooltipPosition !== 'trailing'
+        }
+      ]"
     >
-      <template #trigger>
-        <CircleInfo />
-      </template>
-      <template #content>
-        <p class="w-max max-w-[200px]">
-          {{ tooltipContent }}
-        </p>
-      </template>
-    </Tooltip>
+      <Icon icon="CircleInfo" />
+    </span>
     <label :for="labelFor">
       <span>
         {{ label }}
@@ -41,14 +37,12 @@
 
 <script>
 import { defineComponent } from 'vue';
-import Tooltip from '../Tooltip/Tooltip.vue';
-import CircleInfo from '../Icons/CircleInfo.vue';
+import { Icon } from '../Icon';
 
 export default defineComponent({
   name: 'LobLabel',
   components: {
-    Tooltip,
-    CircleInfo
+    Icon
   },
   props: {
     label: { type: String, required: true },
diff --git a/src/components/Label/__tests__/LobLabel.spec.js b/src/components/Label/__tests__/Label.spec.ts
similarity index 55%
rename from src/components/Label/__tests__/LobLabel.spec.js
rename to src/components/Label/__tests__/Label.spec.ts
index e7084953c..76567dc76 100644
--- a/src/components/Label/__tests__/LobLabel.spec.js
+++ b/src/components/Label/__tests__/Label.spec.ts
@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/vue';
+import { fireEvent, render } from '@testing-library/vue';
 import LobLabel from '../Label.vue';
+import Tooltip from 'primevue/tooltip';
 
 const initialProps = {
   id: 'test',
@@ -11,7 +12,10 @@ const initialProps = {
 describe('LobLabel', () => {
   it('renders correctly', () => {
     const props = initialProps;
-    const { getByText } = render(LobLabel, { props });
+    const { getByText } = render(LobLabel, {
+      props,
+      global: { directives: { tooltip: Tooltip } }
+    });
 
     const label = getByText(props.label);
     expect(label).toBeInTheDocument();
@@ -23,33 +27,42 @@ describe('LobLabel', () => {
       required: true
     };
 
-    const { getByText } = render(LobLabel, { props });
+    const { getByText } = render(LobLabel, {
+      props,
+      global: { directives: { tooltip: Tooltip } }
+    });
     const label = getByText(props.label);
     const asterisk = getByText('*');
     expect(label).toContainElement(asterisk);
   });
 
   describe('if a tooltip is added', () => {
-    it('the tooltip shows on the left by default', () => {
+    it('the tooltip shows on the left by default', async () => {
       const props = { ...initialProps, tooltipContent: 'magic tooltip' };
-      const { getByTestId } = render(LobLabel, { props });
+      const { findByText, getByTestId } = render(LobLabel, {
+        props,
+        global: { directives: { tooltip: Tooltip } }
+      });
 
-      const tooltip = getByTestId('tooltip-leading');
-      expect(tooltip).toBeInTheDocument();
+      await fireEvent.mouseEnter(getByTestId('uic-tooltip-icon'));
+      expect(await findByText('magic tooltip')).toBeInTheDocument();
       const labelWrapper = getByTestId('labelWrapper');
       expect(labelWrapper).not.toHaveClass('justify-between');
     });
 
-    it('the tooltip shows on the right if tooltipPosition:trailing is added', () => {
+    it('the tooltip shows on the right if tooltipPosition:trailing is added', async () => {
       const props = {
         ...initialProps,
         tooltipContent: 'magic tooltip',
         tooltipPosition: 'trailing'
       };
-      const { getByTestId } = render(LobLabel, { props });
+      const { findByText, getByTestId } = render(LobLabel, {
+        props,
+        global: { directives: { tooltip: Tooltip } }
+      });
 
-      const tooltip = getByTestId('tooltip-trailing');
-      expect(tooltip).toBeInTheDocument();
+      await fireEvent.mouseEnter(getByTestId('uic-tooltip-icon'));
+      expect(await findByText('magic tooltip')).toBeInTheDocument();
       const labelWrapper = getByTestId('labelWrapper');
       expect(labelWrapper).toHaveClass('justify-between flex-row-reverse');
     });
diff --git a/src/components/MainNavigation/MainNavigationItem.vue b/src/components/MainNavigation/MainNavigationItem.vue
index a0a2548ef..7059cc56c 100644
--- a/src/components/MainNavigation/MainNavigationItem.vue
+++ b/src/components/MainNavigation/MainNavigationItem.vue
@@ -22,21 +22,7 @@
       @[clickEvent]="toggleSubNav"
     >
       <div class="w-5 h-5 transition-transform duration-100 ease-in">
-        <div v-if="expanded">
-          <slot name="icon" :title="title" />
-        </div>
-        <div v-else>
-          <Tooltip position="right">
-            <template #content>
-              <div class="whitespace-nowrap !type-xs-500 !leading-3">
-                {{ title }}
-              </div>
-            </template>
-            <template #trigger>
-              <slot name="icon" :title="title" />
-            </template>
-          </Tooltip>
-        </div>
+        <slot name="icon" :title="title" />
       </div>
       <span
         :class="[
@@ -79,11 +65,10 @@
 <script>
 import ChevronDown from '../Icons/ChevronDown';
 import LobLink from '../Link/Link';
-import Tooltip from '../Tooltip/Tooltip.vue';
 
 export default {
   name: 'MainNavigationItem',
-  components: { ChevronDown, LobLink, Tooltip },
+  components: { ChevronDown, LobLink },
   props: {
     title: {
       type: String,
diff --git a/src/components/RadioButton/RadioButton.mdx b/src/components/RadioButton/RadioButton.mdx
index c47de355f..dfbe41a6d 100644
--- a/src/components/RadioButton/RadioButton.mdx
+++ b/src/components/RadioButton/RadioButton.mdx
@@ -37,11 +37,7 @@ Example with slot that contains label and tooltip
   v-model="postcard.size"
   @click="handleClick"
 >
-  <div class="flex">
-    {{ service.description }}
-    <!-- this becomes the label -->
-    <Tooltip />
-  </div>
+  <div class="flex">{{ service.description }}</div>
 </RadioButton>
 ```
 
diff --git a/src/components/RadioButtonLarge/RadioButtonLarge.mdx b/src/components/RadioButtonLarge/RadioButtonLarge.mdx
index e82c5f324..019d78cdf 100644
--- a/src/components/RadioButtonLarge/RadioButtonLarge.mdx
+++ b/src/components/RadioButtonLarge/RadioButtonLarge.mdx
@@ -37,11 +37,7 @@ Example with slot that contains label and tooltip
   v-model="postcard.size"
   @click="handleClick"
 >
-  <div class="flex">
-    {{ service.description }}
-    <!-- this becomes the label -->
-    <Tooltip />
-  </div>
+  <div class="flex">{{ service.description }}</div>
 </RadioButtonLarge>
 ```
 
diff --git a/src/components/TextInput/__tests__/TextInput.spec.js b/src/components/TextInput/__tests__/TextInput.spec.ts
similarity index 84%
rename from src/components/TextInput/__tests__/TextInput.spec.js
rename to src/components/TextInput/__tests__/TextInput.spec.ts
index 8e54faecf..6d2300c3a 100644
--- a/src/components/TextInput/__tests__/TextInput.spec.js
+++ b/src/components/TextInput/__tests__/TextInput.spec.ts
@@ -1,7 +1,8 @@
 import '@testing-library/jest-dom';
-import { render, fireEvent } from '@testing-library/vue';
+import { render, fireEvent, RenderResult } from '@testing-library/vue';
 import TextInput from '../TextInput.vue';
 import userEvent from '@testing-library/user-event';
+import Tooltip from 'primevue/tooltip';
 
 const initialProps = {
   id: 'test',
@@ -10,10 +11,19 @@ const initialProps = {
   'v-model': ''
 };
 
+const DEFAULT_RENDER_OPTIONS = {
+  global: {
+    directives: {
+      tooltip: Tooltip
+    }
+  }
+} as const;
+
 describe('Text input', () => {
   it('renders correctly', () => {
     const props = initialProps;
     const { getByLabelText } = render(TextInput, {
+      ...DEFAULT_RENDER_OPTIONS,
       props
     });
     const textInput = getByLabelText(props.label);
@@ -28,6 +38,7 @@ describe('Text input', () => {
     };
 
     const { getByLabelText } = render(TextInput, {
+      ...DEFAULT_RENDER_OPTIONS,
       props
     });
     const textInput = getByLabelText(new RegExp(props.label));
@@ -42,6 +53,7 @@ describe('Text input', () => {
     };
 
     const { getByLabelText } = render(TextInput, {
+      ...DEFAULT_RENDER_OPTIONS,
       props
     });
     const textInput = getByLabelText(props.label);
@@ -56,6 +68,7 @@ describe('Text input', () => {
     };
 
     const { getByTestId } = render(TextInput, {
+      ...DEFAULT_RENDER_OPTIONS,
       props
     });
     const textInput = getByTestId('input-container');
@@ -66,9 +79,10 @@ describe('Text input', () => {
   it('updates the v-model on text input', async () => {
     const props = initialProps;
     const { getByLabelText } = render(TextInput, {
+      ...DEFAULT_RENDER_OPTIONS,
       props
     });
-    const textInput = getByLabelText(props.label);
+    const textInput = getByLabelText(props.label) as HTMLInputElement;
 
     await fireEvent.update(textInput, 'hello!');
     expect(textInput.value).toEqual('hello!');
@@ -77,6 +91,7 @@ describe('Text input', () => {
   it('fires the input event on text input', async () => {
     const props = initialProps;
     const { getByLabelText, emitted } = render(TextInput, {
+      ...DEFAULT_RENDER_OPTIONS,
       props
     });
     const textInput = getByLabelText(props.label);
@@ -96,10 +111,11 @@ describe('Text input', () => {
       selectOnClick: true
     };
     const { getByLabelText } = render(TextInput, {
+      ...DEFAULT_RENDER_OPTIONS,
       props
     });
 
-    const textInput = getByLabelText(props.label);
+    const textInput = getByLabelText(props.label) as HTMLInputElement;
     const updatedValue = 'hello!';
     await fireEvent.update(textInput, updatedValue);
 
@@ -113,7 +129,11 @@ describe('Text input', () => {
     const slots = { iconLeft: [`${slotContent}`] };
 
     const props = initialProps;
-    const { getByText } = render(TextInput, { props, slots });
+    const { getByText } = render(TextInput, {
+      ...DEFAULT_RENDER_OPTIONS,
+      props,
+      slots
+    });
 
     const slot = getByText(new RegExp(slotContent));
     expect(slot).toBeInTheDocument();
@@ -125,6 +145,7 @@ describe('Text input', () => {
       helperText: 'Helper text'
     };
     const { getByText } = render(TextInput, {
+      ...DEFAULT_RENDER_OPTIONS,
       props
     });
 
@@ -138,9 +159,12 @@ describe('Text input', () => {
       withClearButton: true,
       modelValue: 'test value'
     };
-    const { getByRole, getByLabelText } = render(TextInput, { props });
+    const { getByRole, getByLabelText } = render(TextInput, {
+      ...DEFAULT_RENDER_OPTIONS,
+      props
+    });
 
-    const textInput = getByLabelText(props.label);
+    const textInput = getByLabelText(props.label) as HTMLInputElement;
     const updatedValue = 'hello!';
     await fireEvent.update(textInput, updatedValue);
 
@@ -164,35 +188,34 @@ describe('Text input', () => {
 
     it('the label is correctly associated with the input when the tooltip is trailing', async () => {
       const { getByLabelText, getByTestId } = render(TextInput, {
+        ...DEFAULT_RENDER_OPTIONS,
         props: propsTooltip
       });
       const companyInput = getByLabelText(propsTooltip.label);
       expect(companyInput).toBeInTheDocument();
       await userEvent.type(companyInput, 'lob');
       expect(companyInput).toHaveValue('lob');
-      const tooltipTrailing = getByTestId('tooltip-trailing');
-      expect(tooltipTrailing).toBeInTheDocument();
     });
 
     it('the label is correctly associated with the input when the tooltip is leading', () => {
       const { getByLabelText, getByTestId } = render(TextInput, {
+        ...DEFAULT_RENDER_OPTIONS,
         props: propsTooltipLeading
       });
       const companyInput = getByLabelText(propsTooltip.label);
       expect(companyInput).toBeInTheDocument();
-      const tooltipLeading = getByTestId('tooltip-leading');
-      expect(tooltipLeading).toBeInTheDocument();
     });
   });
 
   describe('with Copy Button', () => {
-    let component;
+    let component: RenderResult;
     beforeEach(async () => {
       const props = {
         ...initialProps,
         withCopyButton: true
       };
       component = render(TextInput, {
+        ...DEFAULT_RENDER_OPTIONS,
         props
       });
     });
diff --git a/src/components/Tooltip/Tooltip.mdx b/src/components/Tooltip/Tooltip.mdx
deleted file mode 100644
index 2cf1db4fd..000000000
--- a/src/components/Tooltip/Tooltip.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
-import { Primary } from './Tooltip.stories';
-
-# Tooltip
-
-Tooltips are a flexible component used to provide helpful additional description to other components on hover.
-
-<Canvas of={Primary} />
-
-## How to Use
-
-Customizations exist for<br />
-(1) the position of the tooltip in relation to the content it describes<br />
-(2) the placement of the arrow when a tooltip is above or below the described content (centered by default)<br />
-
-Please note: though you can only insert text in the Storybook demo, the tooltip component will accept any valid HTML or Vue component.
-
-```html
-<tooltip position="top">
-  <template v-slot:content> I display inside the tooltip on hover </template>
-  <template v-slot:trigger>
-    When you hover over me, you'll see the tooltip
-  </template>
-</tooltip>
-```
-
-## Props
-
-<ArgTypes story={PRIMARY_STORY} />
diff --git a/src/components/Tooltip/Tooltip.stories.js b/src/components/Tooltip/Tooltip.stories.js
deleted file mode 100644
index 945d740fa..000000000
--- a/src/components/Tooltip/Tooltip.stories.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import Tooltip from './Tooltip.vue';
-import mdx from './Tooltip.mdx';
-
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-  parameters: {
-    docs: {
-      page: mdx
-    }
-  },
-  argTypes: {
-    content: {
-      control: {
-        type: 'text'
-      },
-      description: 'Content to display inside of the tooltip',
-      table: {
-        defaultValue: 'I am a tooltip.',
-        type: {
-          summary: 'html or component'
-        }
-      }
-    },
-    trigger: {
-      control: {
-        type: 'text'
-      },
-      description: 'Content to trigger display of tooltip on hover',
-      table: {
-        defaultValue: 'Hover me.',
-        type: {
-          summary: 'html or component'
-        }
-      }
-    },
-    position: {
-      options: ['top', 'bottom', 'left', 'right'],
-      control: {
-        type: 'select'
-      }
-    },
-    arrowPlacement: {
-      options: ['center', 'left', 'right'],
-      control: {
-        type: 'select'
-      }
-    }
-  }
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Tooltip },
-  setup: () => ({ args }),
-  template: `
-  <tooltip v-bind="args">
-    <template v-slot:content>
-      {{ args.content }}
-    </template>
-    <template v-slot:trigger>
-      {{ args.trigger }}
-    </template>
-  </tooltip>
-  `
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  content: 'I am a tooltip.',
-  trigger: 'Hover me'
-};
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
deleted file mode 100644
index 8142e6884..000000000
--- a/src/components/Tooltip/Tooltip.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-  <div class="relative">
-    <div
-      :class="['absolute', { hidden: !hover }]"
-      :style="tooltipPositionStyle"
-    >
-      <div
-        v-if="$slots.content"
-        ref="tooltipContainer"
-        :class="[
-          'z-20 px-4 py-4 text-sm rounded-md m-auto bg-gray-900 text-white relative',
-          { 'opacity-0': !hover }
-        ]"
-      >
-        <slot name="content" />
-        <div
-          :class="[
-            'absolute bg-transparent w-0 h-0 m-auto z-10',
-            {
-              'border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent border-b-gray-900 -top-2':
-                hasUpArrow
-            },
-            {
-              'border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-gray-900 -bottom-2':
-                hasDownArrow
-            },
-            {
-              'border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent border-r-gray-900 -left-2':
-                hasLeftArrow
-            },
-            {
-              'border-t-8 border-b-8 border-l-8 border-t-transparent border-b-transparent border-l-gray-900 -right-2':
-                hasRightArrow
-            },
-            { 'top-0 bottom-0': arrowIsVerticallyCenter },
-            { 'left-0 right-0': arrowIsHorizontallyCenter },
-            { 'left-4': arrowIsLeftOfCenter },
-            { 'right-4': arrowIsRightOfCenter }
-          ]"
-        />
-      </div>
-    </div>
-    <div
-      ref="triggerContainer"
-      @mouseover="handleMouseover"
-      @mouseleave="handleMouseleave"
-    >
-      <slot name="trigger" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Tooltip',
-  props: {
-    position: {
-      type: String,
-      default: 'bottom',
-      validator: function (value) {
-        // The value must match one of these strings
-        return ['top', 'bottom', 'left', 'right'].indexOf(value) !== -1;
-      }
-    },
-    arrowPlacement: {
-      type: String,
-      default: 'center',
-      validator: function (value) {
-        // The value must match one of these strings
-        return ['center', 'left', 'right'].indexOf(value) !== -1;
-      }
-    }
-  },
-  emits: ['mouseover', 'mouseleave'],
-  data() {
-    return {
-      hover: false,
-      triggerWidth: 0,
-      triggerHeight: 0,
-      xOffset: 0,
-      yOffset: 0
-    };
-  },
-  computed: {
-    hasUpArrow() {
-      return this.position.match(/bottom/);
-    },
-    hasDownArrow() {
-      return this.position.match(/top/);
-    },
-    hasLeftArrow() {
-      return this.position.match(/right/);
-    },
-    hasRightArrow() {
-      return this.position.match(/left/);
-    },
-    arrowIsVerticallyCenter() {
-      return this.hasLeftArrow || this.hasRightArrow;
-    },
-    arrowIsHorizontallyCenter() {
-      return (
-        !this.arrowIsVerticallyCenter && this.arrowPlacement.match(/center/)
-      );
-    },
-    arrowIsLeftOfCenter() {
-      return !this.arrowIsVerticallyCenter && this.arrowPlacement.match(/left/);
-    },
-    arrowIsRightOfCenter() {
-      return (
-        !this.arrowIsVerticallyCenter && this.arrowPlacement.match(/right/)
-      );
-    },
-    tooltipPositionStyle() {
-      switch (this.position) {
-        case 'top':
-          return {
-            left: `${this.xOffset}px`,
-            bottom: `calc(${this.triggerHeight}px + 1rem)`
-          };
-        case 'left':
-          return {
-            right: `calc(${this.triggerWidth}px + 1rem)`,
-            top: `${this.yOffset}px`
-          };
-        case 'right':
-          return {
-            left: `calc(${this.triggerWidth}px + 1rem)`,
-            top: `${this.yOffset}px`
-          };
-        case 'bottom':
-        default:
-          return {
-            left: `${this.xOffset}px`,
-            top: `calc(${this.triggerHeight}px + 1rem)`
-          };
-      }
-    }
-  },
-  updated() {
-    this.triggerWidth = this.$refs.triggerContainer.clientWidth;
-    this.triggerHeight = this.$refs.triggerContainer.clientHeight;
-    this.xOffset = this.getXOffset();
-    this.yOffset = this.getYOffset();
-  },
-  methods: {
-    handleMouseover($event) {
-      this.hover = true;
-      this.$emit('mouseover', $event);
-    },
-    handleMouseleave($event) {
-      this.hover = false;
-      this.$emit('mouseleave', $event);
-    },
-    getXOffset() {
-      if (this.$slots.content) {
-        return (
-          (this.$refs.triggerContainer.clientWidth -
-            this.$refs.tooltipContainer.clientWidth) /
-          2
-        );
-      }
-    },
-    getYOffset() {
-      if (this.$slots.content) {
-        return (
-          (this.$refs.triggerContainer.clientHeight -
-            this.$refs.tooltipContainer.clientHeight) /
-          2
-        );
-      }
-    }
-  }
-};
-</script>
diff --git a/src/components/Tooltip/TooltipPassThrough.ts b/src/components/Tooltip/TooltipPassThrough.ts
new file mode 100644
index 000000000..7414c6b1a
--- /dev/null
+++ b/src/components/Tooltip/TooltipPassThrough.ts
@@ -0,0 +1,58 @@
+import { TooltipDirectivePassThroughOptions } from 'primevue/tooltip';
+
+export const TooltipPassThrough: TooltipDirectivePassThroughOptions = {
+  root: {
+    class: 'absolute p-2 fadein',
+    style: 'animation: fadeIn 0.25s;'
+  },
+  arrow: ({ context }) => ({
+    class: [
+      'absolute border-transparent border-solid',
+      'w-0 h-0',
+      {
+        '!border-r-gray-900':
+          context?.right ||
+          (!context?.right &&
+            !context?.left &&
+            !context?.top &&
+            !context?.bottom),
+        '!border-l-gray-900': context?.left,
+        '!border-t-gray-900': context?.top,
+        '!border-b-gray-900': context?.bottom
+      }
+    ],
+    style: (() => {
+      if (
+        context?.right ||
+        (!context?.right && !context?.left && !context?.top && !context?.bottom)
+      ) {
+        return {
+          'border-width': '0.5rem 0.5rem 0.5rem 0',
+          'margin-top': '-0.5rem'
+        };
+      }
+      if (context?.left) {
+        return {
+          'border-width': '0.5rem 0 0.5rem 0.5rem',
+          'margin-top': '-0.5rem'
+        };
+      }
+      if (context?.top) {
+        return {
+          'border-width': '0.5rem 0.5rem 0 0.5rem',
+          'margin-left': '-0.5rem'
+        };
+      }
+      if (context?.bottom) {
+        return {
+          'border-width': '0 0.5rem 0.5rem 0.5rem',
+          'margin-left': '-0.5rem'
+        };
+      }
+    })()
+  }),
+  text: {
+    class: ['p-3 rounded-md', 'bg-gray-900', 'text-white text-sm type-sm-600'],
+    style: 'max-width: 280px;'
+  }
+};
diff --git a/src/components/Tooltip/__tests__/Tooltip.spec.js b/src/components/Tooltip/__tests__/Tooltip.spec.js
deleted file mode 100644
index 6006a59c9..000000000
--- a/src/components/Tooltip/__tests__/Tooltip.spec.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, fireEvent } from '@testing-library/vue';
-import Tooltip from '../Tooltip.vue';
-
-const slots = {
-  content: 'Tooltip content',
-  trigger: 'I trigger the tooltip on hover'
-};
-
-describe('Tooltip', () => {
-  it('renders correctly in the bottom position', () => {
-    const { queryByText } = render(Tooltip, {
-      slots
-    });
-
-    const tooltip = queryByText(slots.content);
-    const trigger = queryByText(slots.trigger);
-    expect(tooltip).toBeInTheDocument();
-    expect(trigger).toBeInTheDocument();
-  });
-
-  it('renders correctly in the top position', () => {
-    const { queryByText } = render(Tooltip, {
-      props: { position: 'top' },
-      slots
-    });
-
-    const tooltip = queryByText(slots.content);
-    const trigger = queryByText(slots.trigger);
-    expect(tooltip).toBeInTheDocument();
-    expect(trigger).toBeInTheDocument();
-  });
-
-  it('renders correctly in the left position', () => {
-    const { queryByText } = render(Tooltip, {
-      props: { position: 'left' },
-      slots
-    });
-
-    const tooltip = queryByText(slots.content);
-    const trigger = queryByText(slots.trigger);
-    expect(tooltip).toBeInTheDocument();
-    expect(trigger).toBeInTheDocument();
-  });
-
-  it('renders correctly in the right position', () => {
-    const { queryByText } = render(Tooltip, {
-      props: { position: 'right' },
-      slots
-    });
-
-    const tooltip = queryByText(slots.content);
-    const trigger = queryByText(slots.trigger);
-    expect(tooltip).toBeInTheDocument();
-    expect(trigger).toBeInTheDocument();
-  });
-
-  it('fires the mouseover event when the container is moused over', async () => {
-    const { queryByText, emitted } = render(Tooltip, {
-      slots
-    });
-
-    const trigger = queryByText(slots.trigger);
-
-    await fireEvent.mouseOver(trigger);
-    const emittedEvent = emitted();
-    expect(emittedEvent).toHaveProperty('mouseover');
-  });
-
-  it('fires the mouseleave event when the container the mouse leaves', async () => {
-    const { queryByText, emitted } = render(Tooltip, {
-      slots
-    });
-
-    const trigger = queryByText(slots.trigger);
-
-    await fireEvent.mouseLeave(trigger);
-    const emittedEvent = emitted();
-    expect(emittedEvent).toHaveProperty('mouseleave');
-  });
-});
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
new file mode 100644
index 000000000..9e9436010
--- /dev/null
+++ b/src/components/Tooltip/index.ts
@@ -0,0 +1 @@
+export * from './TooltipPassThrough';
diff --git a/src/components/index.js b/src/components/index.js
index 923e32691..a312c3a05 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -37,7 +37,6 @@ export { default as TableRow } from './Table/TableRow';
 export { default as Textarea } from './Textarea/Textarea';
 export { default as TextInput } from './TextInput/TextInput';
 export { default as ToggleButton } from './ToggleButton/ToggleButton';
-export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as TopNavbar } from './TopNavbar/TopNavbar';
 export { default as TopNavDropdown } from './TopNavDropdown/TopNavDropdown';
 export { default as TopNavDropdownItem } from './TopNavDropdown/TopNavDropdownItem';
diff --git a/src/main.ts b/src/main.ts
index 21dd8bd98..eee2b8dbf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -44,6 +44,7 @@ export * from './components/Pagination';
 export * from './components/Skeleton';
 export * from './components/Steps';
 export * from './components/Table';
+export * from './components/Tooltip';
 export * from './components/Tile';
 export * from './types';
 
diff --git a/tailwind.config.js b/tailwind.config.js
index f160cb65b..9c30d083b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
 const plugin = require('tailwindcss/plugin');
 
 module.exports = {
-  content: ['./src/**/*.vue'],
+  content: ['./src/**/*.{vue,js,ts}'],
   safelist: [
     { pattern: /text-(xl|2xl|3xl|4xl|5xl)/ },
     {