diff --git a/packages/celeste-vue/src/components/tooltip/stories/tooltip.stories.ts b/packages/celeste-vue/src/components/tooltip/stories/tooltip.stories.ts
new file mode 100644
index 0000000..90a6653
--- /dev/null
+++ b/packages/celeste-vue/src/components/tooltip/stories/tooltip.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Tooltip from '../tooltip.vue';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {
+    text: 'Tooltip text',
+    position: 'right',
+    size: 'lg',
+    description: 'Insert tooltip description here. It would look much better as three lines of text.',
+    dismissable: true,
+  },
+
+  render: args => ({
+    components: { Tooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+    <div>
+      <Tooltip v-bind="args">
+         <template #tooltip-trigger>
+            <i style="width: 20px; height: 20px;"  class="i-celeste-information-line" />
+         </template>
+      </Tooltip>
+    </div>
+    `,
+  }),
+};
diff --git a/packages/celeste-vue/src/components/tooltip/tooltip.vue b/packages/celeste-vue/src/components/tooltip/tooltip.vue
new file mode 100644
index 0000000..d7028ed
--- /dev/null
+++ b/packages/celeste-vue/src/components/tooltip/tooltip.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import clsx from 'clsx';
+import { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue';
+import { ref } from 'vue';
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+  size: 'xs',
+  icon: 'i-celeste-information-line',
+  position: 'left',
+});
+
+const isOpen = ref(true);
+</script>
+
+<script lang="ts">
+export interface TooltipProps {
+  class?: string;
+  size?: 'xxs' | 'xs' | 'lg';
+  position: 'top' | 'right' | 'bottom' | 'left';
+  text: string;
+  icon?: string;
+  description?: string;
+  dismissable: boolean;
+}
+</script>
+
+<template>
+  <TooltipProvider>
+    <TooltipRoot :open="isOpen" @update:open="(val) => isOpen = val">
+      <TooltipTrigger
+        :class="clsx('celeste-tooltip-trigger', props.class)"
+      >
+        <slot name="tooltip-trigger" class="celeste-tooltip-trigger" />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent
+          aria-label="tooltip"
+          :aria-hidden="isOpen"
+          :class="clsx(
+            'celeste-tooltip-content',
+            `celeste-tooltip-size-${size}`,
+          )"
+          :side-offset="1"
+          :side="props.position"
+          :arrow-padding="2"
+          :align="size === 'lg' ? 'start' : 'center'"
+          force-mount
+        >
+          <div v-if="size === 'lg'" class="celeste-tooltip-large">
+            <i v-if="icon" :class="icon" />
+            <div class="celeste-tooltip-large-content">
+              <div class="celeste-tooltip-large-title">
+                {{ text }}
+              </div>
+              <div
+                v-if="description"
+                class="celeste-tooltip-large-description"
+              >
+                {{ description }}
+              </div>
+            </div>
+            <button
+              v-if="dismissable"
+              aria-label="close tooltip"
+              type="button"
+              @click="() => isOpen = false"
+            >
+              <i class="i-celeste-close-line" />
+            </button>
+          </div>
+          <div v-else>
+            {{ text }}
+          </div>
+        </TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+
+.celeste-tooltip {
+  $sizes-map: (
+    'xxs': (
+      'padding': (
+        2px 6px,
+      ),
+      'border-radius': var(--radius-4),
+      'justify-content': center,
+      'align-items': center,
+    ),
+    'xs': (
+      'padding': (
+        4px 10px,
+      ),
+      'border-radius': var(--radius-4),
+      'justify-content': center,
+      'align-items': center,
+    ),
+    'lg': (
+      'padding': 12px,
+      'border-radius': var(--radius-12),
+      'align-items': flex-start,
+      'justify-content': flex-start,
+    ),
+  );
+
+  @each $size, $values in $sizes-map {
+    &-size-#{$size} {
+      align-items: map.get($values, 'align-items');
+      justify-content: map.get($values, 'justify-content');
+      padding: map.get($values, 'padding');
+      border-radius: map.get($values, 'border-radius');
+    }
+  }
+}
+
+.celeste-tooltip-trigger {
+  border: none;
+  background: none;
+}
+
+.celeste-tooltip-content {
+  display: flex;
+  position: relative;
+  transition-property: opacity;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: 1px solid var(--color-stroke-soft-200);
+  opacity: 0;
+  background: var(--color-bg-white-0);
+  box-shadow:
+    0 12px 24px 0 rgb(14 18 27 / 6%),
+    0 1px 2px 0 rgb(14 18 27 / 3%);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  will-change: opacity;
+
+  &[data-state='delayed-open'] {
+    opacity: 1;
+  }
+
+  &[data-state='closed'] {
+    opacity: 0;
+  }
+}
+
+.celeste-tooltip-large {
+  display: flex;
+  gap: var(--spacing-12);
+  max-width: 250px;
+
+  i {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    color: var(--color-icon-sub-600);
+  }
+
+  button {
+    width: fit-content;
+    height: fit-content;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+  }
+
+  &-title {
+    color: var(--color-text-strong-950);
+    font: var(--label-sm);
+  }
+
+  &-description {
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-xs);
+  }
+}
+</style>