diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d351f2..a2d68ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- **Programmatic Control**: Tooltips can now be controlled programmatically via three methods:
+  - **Component Template Refs**: Access `show()`, `hide()`, `toggle()`, and `isVisible()` methods via template refs
+  - **v-model Support**: Two-way binding for tooltip visibility state
+  - **TooltipControl API**: Global API for controlling directive tooltips by ID (`TooltipControl.show()`, `TooltipControl.hide()`, `TooltipControl.toggle()`, `TooltipControl.isVisible()`)
+- Added `modelValue` prop to Tooltip component for v-model support
+- Added `id` prop to support unique identification for directive tooltips
+- Exported `TooltipExposed` type for TypeScript template ref typing
+- Exported `TooltipControl` API for programmatic directive control
+- Added comprehensive documentation for programmatic control at `docs/guide/programmatic-control.md`
+- Added examples demonstrating all three control methods in showcase components
+
 ## [1.5.0] - 2025-10-30
 
 ### Added
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 970df08..2bf4b64 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -63,6 +63,7 @@ export default defineConfig({
           items: [
             { text: 'Component Usage', link: '/guide/component-usage' },
             { text: 'Directive Usage', link: '/guide/directive-usage' },
+            { text: 'Programmatic Control', link: '/guide/programmatic-control' },
             { text: 'Global Configuration', link: '/guide/global-config' },
             { text: 'Runtime Configuration', link: '/guide/runtime-config' },
           ],
diff --git a/docs/api/component.md b/docs/api/component.md
index 4a5eecf..e7ab734 100644
--- a/docs/api/component.md
+++ b/docs/api/component.md
@@ -17,6 +17,79 @@ The Vue Custom Tooltip component provides a comprehensive API for creating and c
 | `showArrow` | `boolean` | `true` | Show arrow pointer |
 | `offset` | `number` | `8` | Offset from trigger (px) |
 | `dark` | `'auto' \| boolean` | `'auto'` | Dark mode behavior |
+| `modelValue` | `boolean` | `undefined` | Control visibility with v-model |
+
+## Exposed Methods
+
+The Tooltip component exposes methods for programmatic control via template refs:
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `show()` | `void` | Show the tooltip immediately (bypasses delays) |
+| `hide()` | `void` | Hide the tooltip immediately (bypasses delays) |
+| `toggle()` | `void` | Toggle the tooltip visibility |
+| `isVisible()` | `boolean` | Check if the tooltip is currently visible |
+
+### Using Template Refs
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { TooltipExposed } from '@borstihd/vue-custom-tooltip'
+
+const tooltipRef = ref<TooltipExposed | null>(null)
+
+function showTooltip() {
+  tooltipRef.value?.show()
+}
+
+function hideTooltip() {
+  tooltipRef.value?.hide()
+}
+
+function toggleTooltip() {
+  tooltipRef.value?.toggle()
+}
+</script>
+
+<template>
+  <div>
+    <Tooltip ref="tooltipRef" content="Programmatically controlled">
+      <button>Target Element</button>
+    </Tooltip>
+    
+    <button @click="showTooltip">Show</button>
+    <button @click="hideTooltip">Hide</button>
+    <button @click="toggleTooltip">Toggle</button>
+  </div>
+</template>
+```
+
+### Using v-model
+
+The component supports two-way binding for visibility control:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isVisible = ref(false)
+</script>
+
+<template>
+  <div>
+    <Tooltip v-model="isVisible" content="Controlled via v-model">
+      <button>Target Element</button>
+    </Tooltip>
+    
+    <button @click="isVisible = true">Show</button>
+    <button @click="isVisible = false">Hide</button>
+    <button @click="isVisible = !isVisible">Toggle</button>
+    
+    <p>Tooltip is {{ isVisible ? 'visible' : 'hidden' }}</p>
+  </div>
+</template>
+```
 
 ## Slots
 
@@ -69,11 +142,21 @@ The content slot allows you to use rich HTML content in your tooltips:
 The component is fully typed. You can import the types for use in your TypeScript code:
 
 ```ts
-import type { TooltipPosition, TooltipProps, TooltipTrigger } from '@borstihd/vue-custom-tooltip'
+import type {
+  TooltipExposed,
+  TooltipPosition,
+  TooltipProps,
+  TooltipTrigger,
+} from '@borstihd/vue-custom-tooltip'
 
 // Example usage in component props
 const position: TooltipPosition = 'auto'
 const trigger: TooltipTrigger = 'both'
+
+// Example usage for template refs
+const tooltipRef = ref<TooltipExposed | null>(null)
+// or
+const tooltipRef = useTemplateRef<TooltipExposed | null>('tooltipRef')
 ```
 
 ## Best Practices
diff --git a/docs/api/directive.md b/docs/api/directive.md
index 81db2a7..c8c442a 100644
--- a/docs/api/directive.md
+++ b/docs/api/directive.md
@@ -183,6 +183,7 @@ For more complex configurations, you can pass an object instead of a simple stri
 | `showArrow` | `boolean` | `true` | Show arrow pointer |
 | `offset` | `number` | `8` | Offset from trigger (px) |
 | `dark` | `'auto' \| boolean` | `'auto'` | Dark mode behavior |
+| `id` | `string` | `undefined` | Unique identifier for programmatic control |
 
 ### Combining with Modifiers
 
@@ -206,6 +207,98 @@ Object configuration can still be combined with modifiers for quick overrides:
 When using both modifiers and object configuration, modifiers take precedence over the object configuration for the same property.
 :::
 
+## Programmatic Control
+
+Directive tooltips can be controlled programmatically using the `TooltipControl` API. This requires assigning a unique `id` to the tooltip.
+
+### Using TooltipControl API
+
+```vue
+<script setup>
+import { TooltipControl } from '@borstihd/vue-custom-tooltip'
+
+function showTooltip() {
+  TooltipControl.show('my-tooltip')
+}
+
+function hideTooltip() {
+  TooltipControl.hide('my-tooltip')
+}
+
+function toggleTooltip() {
+  TooltipControl.toggle('my-tooltip')
+}
+
+function checkVisibility() {
+  const isVisible = TooltipControl.isVisible('my-tooltip')
+  console.log('Tooltip visible:', isVisible)
+}
+</script>
+
+<template>
+  <div>
+    <button
+      v-tooltip="{
+        content: 'Programmatically controlled',
+        id: 'my-tooltip'
+      }"
+    >
+      Target Element
+    </button>
+    
+    <button @click="showTooltip">Show</button>
+    <button @click="hideTooltip">Hide</button>
+    <button @click="toggleTooltip">Toggle</button>
+  </div>
+</template>
+```
+
+### TooltipControl API
+
+| Method | Parameters | Returns | Description |
+|--------|------------|---------|-------------|
+| `show(id)` | `id: string` | `void` | Show tooltip by ID |
+| `hide(id)` | `id: string` | `void` | Hide tooltip by ID |
+| `toggle(id)` | `id: string` | `void` | Toggle tooltip by ID |
+| `isVisible(id)` | `id: string` | `boolean` | Check if tooltip is visible |
+
+::: tip Note
+Programmatic control methods (`show`, `hide`, `toggle`) bypass delays for immediate response.
+:::
+
+### Coordinated Tooltips
+
+You can control multiple tooltips simultaneously:
+
+```vue
+<script setup>
+import { TooltipControl } from '@borstihd/vue-custom-tooltip'
+
+function showAllTooltips() {
+  TooltipControl.show('tooltip-1')
+  TooltipControl.show('tooltip-2')
+  TooltipControl.show('tooltip-3')
+}
+
+function hideAllTooltips() {
+  TooltipControl.hide('tooltip-1')
+  TooltipControl.hide('tooltip-2')
+  TooltipControl.hide('tooltip-3')
+}
+</script>
+
+<template>
+  <div>
+    <button v-tooltip="{ content: 'First', id: 'tooltip-1' }">1</button>
+    <button v-tooltip="{ content: 'Second', id: 'tooltip-2' }">2</button>
+    <button v-tooltip="{ content: 'Third', id: 'tooltip-3' }">3</button>
+    
+    <button @click="showAllTooltips">Show All</button>
+    <button @click="hideAllTooltips">Hide All</button>
+  </div>
+</template>
+```
+
 ## Best Practices
 
 1. **Choose Wisely**: Use the directive for simple text tooltips. For rich content, use the component approach.
@@ -213,3 +306,4 @@ When using both modifiers and object configuration, modifiers take precedence ov
 3. **Concise Content**: Keep tooltip text short and informative.
 4. **Position Awareness**: Consider using `.auto` for dynamic positioning.
 5. **Animation Speed**: Use `.slow` for important information, `.fast` for subtle hints.
+6. **Programmatic IDs**: Use descriptive, unique IDs for programmatically controlled tooltips.
diff --git a/docs/guide/programmatic-control.md b/docs/guide/programmatic-control.md
new file mode 100644
index 0000000..eaed04e
--- /dev/null
+++ b/docs/guide/programmatic-control.md
@@ -0,0 +1,247 @@
+# Programmatic Control
+
+You can control tooltips programmatically using several methods:
+
+## Component Mode
+
+### Using Template Refs
+
+Access the component instance using template refs to call methods directly:
+
+```vue
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import type { TooltipExposed } from 'vue-custom-tooltip'
+
+const tooltipRef = useTemplateRef<TooltipExposed | null>('tooltipRef')
+
+function showTooltip() {
+  tooltipRef.value?.show()
+}
+
+function hideTooltip() {
+  tooltipRef.value?.hide()
+}
+
+function toggleTooltip() {
+  tooltipRef.value?.toggle()
+}
+
+function checkVisibility() {
+  const isVisible = tooltipRef.value?.isVisible()
+  console.log('Tooltip visible:', isVisible)
+}
+</script>
+
+<template>
+  <div>
+    <Tooltip ref="tooltipRef" content="Programmatically controlled">
+      <button>Target Element</button>
+    </Tooltip>
+    
+    <button @click="showTooltip">Show</button>
+    <button @click="hideTooltip">Hide</button>
+    <button @click="toggleTooltip">Toggle</button>
+  </div>
+</template>
+```
+
+### Using v-model
+
+Control tooltip visibility with two-way binding:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isVisible = ref(false)
+</script>
+
+<template>
+  <div>
+    <Tooltip v-model="isVisible" content="Controlled via v-model">
+      <button>Target Element</button>
+    </Tooltip>
+    
+    <button @click="isVisible = true">Show</button>
+    <button @click="isVisible = false">Hide</button>
+    <button @click="isVisible = !isVisible">Toggle</button>
+    
+    <p>Tooltip is {{ isVisible ? 'visible' : 'hidden' }}</p>
+  </div>
+</template>
+```
+
+## Directive Mode
+
+### Using TooltipControl API
+
+Control directive tooltips by assigning an ID and using the `TooltipControl` API:
+
+```vue
+<script setup lang="ts">
+import { TooltipControl } from 'vue-custom-tooltip'
+
+function showTooltip() {
+  TooltipControl.show('my-tooltip')
+}
+
+function hideTooltip() {
+  TooltipControl.hide('my-tooltip')
+}
+
+function toggleTooltip() {
+  TooltipControl.toggle('my-tooltip')
+}
+
+function checkVisibility() {
+  const isVisible = TooltipControl.isVisible('my-tooltip')
+  console.log('Tooltip visible:', isVisible)
+}
+</script>
+
+<template>
+  <div>
+    <button 
+      v-tooltip="{ 
+        content: 'Programmatically controlled', 
+        id: 'my-tooltip' 
+      }"
+    >
+      Target Element
+    </button>
+    
+    <button @click="showTooltip">Show</button>
+    <button @click="hideTooltip">Hide</button>
+    <button @click="toggleTooltip">Toggle</button>
+  </div>
+</template>
+```
+
+## API Reference
+
+### TooltipExposed (Component)
+
+Methods exposed by the Tooltip component via template refs:
+
+| Method | Description |
+|--------|-------------|
+| `show()` | Show the tooltip immediately (bypasses delays) |
+| `hide()` | Hide the tooltip immediately (bypasses delays) |
+| `toggle()` | Toggle the tooltip visibility |
+| `isVisible()` | Returns `true` if tooltip is currently visible |
+
+### TooltipControl (Directive)
+
+Global API for controlling directive tooltips:
+
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `show(id)` | `id: string` | Show tooltip by ID |
+| `hide(id)` | `id: string` | Hide tooltip by ID |
+| `toggle(id)` | `id: string` | Toggle tooltip by ID |
+| `isVisible(id)` | `id: string` | Check if tooltip is visible |
+
+### v-model Support
+
+The Tooltip component supports `v-model` for two-way binding of visibility state:
+
+```vue
+<template>
+  <Tooltip v-model="isVisible" content="...">
+    <button>Target</button>
+  </Tooltip>
+</template>
+```
+
+When the tooltip visibility changes (through user interaction or programmatic control), the bound variable is automatically updated.
+
+## Use Cases
+
+### Show Tooltip on Page Load
+
+```vue
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import type { TooltipExposed } from 'vue-custom-tooltip'
+
+const tooltipRef = ref<TooltipExposed | null>(null)
+
+onMounted(() => {
+  // Show tooltip after 1 second
+  setTimeout(() => {
+    tooltipRef.value?.show()
+  }, 1000)
+})
+</script>
+
+<template>
+  <Tooltip ref="tooltipRef" content="Welcome!">
+    <button>Get Started</button>
+  </Tooltip>
+</template>
+```
+
+### Conditional Tooltip Display
+
+```vue
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const hasError = ref(false)
+const tooltipVisible = computed({
+  get: () => hasError.value,
+  set: (value) => {
+    if (!value) hasError.value = false
+  }
+})
+
+function validateForm() {
+  hasError.value = true // Shows tooltip automatically
+}
+</script>
+
+<template>
+  <Tooltip v-model="tooltipVisible" content="Please fix the error">
+    <input @blur="validateForm" />
+  </Tooltip>
+</template>
+```
+
+### Coordinated Tooltips
+
+```vue
+<script setup lang="ts">
+import { TooltipControl } from 'vue-custom-tooltip'
+
+function showAllTooltips() {
+  TooltipControl.show('tooltip-1')
+  TooltipControl.show('tooltip-2')
+  TooltipControl.show('tooltip-3')
+}
+
+function hideAllTooltips() {
+  TooltipControl.hide('tooltip-1')
+  TooltipControl.hide('tooltip-2')
+  TooltipControl.hide('tooltip-3')
+}
+</script>
+
+<template>
+  <div>
+    <button v-tooltip="{ content: 'First', id: 'tooltip-1' }">1</button>
+    <button v-tooltip="{ content: 'Second', id: 'tooltip-2' }">2</button>
+    <button v-tooltip="{ content: 'Third', id: 'tooltip-3' }">3</button>
+    
+    <button @click="showAllTooltips">Show All</button>
+    <button @click="hideAllTooltips">Hide All</button>
+  </div>
+</template>
+```
+
+## Notes
+
+- Programmatic `show()` and `hide()` methods bypass the configured delays for immediate display/hiding
+- When using `v-model`, the tooltip will still respect trigger events (hover, focus, etc.) but the visibility state will be synchronized
+- Directive tooltips require an explicit `id` prop for programmatic control
+- Component IDs are optional but can be useful for debugging or advanced use cases
diff --git a/package.json b/package.json
index d0f5d4f..7755300 100644
--- a/package.json
+++ b/package.json
@@ -90,4 +90,4 @@
     "vitest": "^4.0.8",
     "vue-tsc": "^3.1.3"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index 148d061..dd33a3d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,11 +4,12 @@ import Button from '@/components/Button.vue'
 import PresetSwitcher from '@/components/PresetSwitcher.vue'
 import DirectiveBenchmark from '@/components/showcase/DirectiveBenchmark.vue'
 import DirectiveExample from '@/components/showcase/DirectiveExample.vue'
+import ProgrammaticControl from '@/components/showcase/ProgrammaticControl.vue'
 import TooltipExample from '@/components/showcase/TooltipExample.vue'
 import ThemeToggle from '@/components/ThemeToggle.vue'
 import packageJson from '../package.json'
 
-type Tabs = 'component' | 'directive' | 'directive-benchmark'
+type Tabs = 'component' | 'directive' | 'directive-benchmark' | 'programmatic-control'
 
 const activeTab = ref<Tabs>('component')
 
@@ -85,6 +86,17 @@ const githubRepo = packageJson.repository.url.replace('.git', '')
           >
             Tooltip Directive Benchmark
           </button>
+          <button
+            class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
+            :class="[
+              activeTab === 'programmatic-control'
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600',
+            ]"
+            @click="switchTab('programmatic-control')"
+          >
+            Programmatic Control
+          </button>
         </div>
       </div>
     </nav>
@@ -147,6 +159,7 @@ const githubRepo = packageJson.repository.url.replace('.git', '')
         <TooltipExample v-if="activeTab === 'component'" />
         <DirectiveExample v-else-if="activeTab === 'directive'" />
         <DirectiveBenchmark v-else-if="activeTab === 'directive-benchmark'" />
+        <ProgrammaticControl v-else-if="activeTab === 'programmatic-control'" />
       </div>
     </main>
 
@@ -184,6 +197,11 @@ const githubRepo = packageJson.repository.url.replace('.git', '')
               :disabled="activeTab === 'directive-benchmark'"
               @click="switchTab('directive-benchmark')"
             />
+            <Button
+              label="Programmatic Control"
+              :disabled="activeTab === 'programmatic-control'"
+              @click="switchTab('programmatic-control')"
+            />
           </div>
         </div>
       </div>
diff --git a/src/components/showcase/DirectiveExample.vue b/src/components/showcase/DirectiveExample.vue
index 07ed3b1..eda56da 100644
--- a/src/components/showcase/DirectiveExample.vue
+++ b/src/components/showcase/DirectiveExample.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Button from '@/components/Button.vue'
+import { TooltipControl } from '@/directives/tooltip'
 
 const btnLabel = ref('Click me to change!')
 const tooltipMsg = ref('Click this Button, it will change the button text and tooltip text')
@@ -9,6 +10,19 @@ function onClick(message: string) {
   btnLabel.value = message
   tooltipMsg.value = message
 }
+
+// Programmatic control functions
+function showProgrammaticTooltip() {
+  TooltipControl.show('programmatic-tooltip')
+}
+
+function hideProgrammaticTooltip() {
+  TooltipControl.hide('programmatic-tooltip')
+}
+
+function toggleProgrammaticTooltip() {
+  TooltipControl.toggle('programmatic-tooltip')
+}
 </script>
 
 <template>
@@ -46,6 +60,29 @@ function onClick(message: string) {
       </div>
     </div>
 
+    <!-- Programmatic Control with Directive -->
+    <div class="flex flex-col gap-4">
+      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+        Programmatic Control
+      </h3>
+      <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
+        Use TooltipControl API to programmatically show/hide tooltips by ID.
+      </p>
+      <div class="flex gap-2 items-center flex-wrap">
+        <Button
+          v-tooltip="{ content: 'Controlled programmatically', id: 'programmatic-tooltip' }"
+          label="Target Element"
+        />
+        <Button label="Show" size="small" @click="showProgrammaticTooltip" />
+        <Button label="Hide" size="small" @click="hideProgrammaticTooltip" />
+        <Button label="Toggle" size="small" @click="toggleProgrammaticTooltip" />
+      </div>
+      <div class="text-xs text-gray-500 dark:text-gray-500 space-y-1">
+        <p>Import: <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded">import { TooltipControl } from 'vue-custom-tooltip'</code></p>
+        <p>Usage: <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded">TooltipControl.show('id')</code></p>
+      </div>
+    </div>
+
     <!-- Using modifiers for positioning -->
     <div class="flex flex-col gap-4">
       <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
diff --git a/src/components/showcase/ProgrammaticControl.vue b/src/components/showcase/ProgrammaticControl.vue
new file mode 100644
index 0000000..b84ad7e
--- /dev/null
+++ b/src/components/showcase/ProgrammaticControl.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { TooltipExposed } from '@/types/tooltip'
+import { ref, useTemplateRef } from 'vue'
+import Tooltip from '@/components/tooltip/Tooltip.vue'
+import { TooltipControl } from '@/directives/tooltip'
+
+// Method 1: Using template ref
+const tooltipRef = useTemplateRef<TooltipExposed | null>('tooltipRef')
+
+// Method 2: Using v-model
+const isVisible = ref(false)
+
+// Methods for ref control
+function showRefTooltip() {
+  tooltipRef.value?.show()
+}
+
+function hideRefTooltip() {
+  tooltipRef.value?.hide()
+}
+
+// Methods for directive control
+function showDirectiveTooltip() {
+  TooltipControl.show('controlled-tooltip')
+}
+
+function hideDirectiveTooltip() {
+  TooltipControl.hide('controlled-tooltip')
+}
+</script>
+
+<template>
+  <div class="p-8 space-y-8">
+    <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">
+      Programmatic Tooltip Control Demo
+    </h2>
+
+    <!-- Method 1: Template Ref -->
+    <section class="space-y-4">
+      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+        Method 1: Template Ref
+      </h3>
+      <div class="flex gap-2 items-center">
+        <Tooltip ref="tooltipRef" content="Controlled via ref">
+          <button class="px-4 py-2 bg-blue-500 text-white rounded">
+            Target Element
+          </button>
+        </Tooltip>
+        <button class="px-3 py-1 bg-green-600 text-white rounded text-sm" @click="showRefTooltip">
+          Show
+        </button>
+        <button class="px-3 py-1 bg-red-600 text-white rounded text-sm" @click="hideRefTooltip">
+          Hide
+        </button>
+      </div>
+      <pre class="bg-gray-100 dark:bg-gray-700 dark:text-white p-4 rounded text-sm"><code>const tooltipRef = ref&lt;TooltipExposed | null&gt;(null)
+tooltipRef.value?.show()
+tooltipRef.value?.hide()</code></pre>
+    </section>
+
+    <!-- Method 2: v-model -->
+    <section class="space-y-4">
+      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+        Method 2: v-model
+      </h3>
+      <div class="flex gap-2 items-center">
+        <Tooltip v-model="isVisible" content="Controlled via v-model">
+          <button class="px-4 py-2 bg-blue-500 text-white rounded">
+            Target Element
+          </button>
+        </Tooltip>
+        <button class="px-3 py-1 bg-green-600 text-white rounded text-sm" @click="isVisible = true">
+          Show
+        </button>
+        <button class="px-3 py-1 bg-red-600 text-white rounded text-sm" @click="isVisible = false">
+          Hide
+        </button>
+        <span class="text-sm text-gray-600">
+          State: {{ isVisible ? 'Visible' : 'Hidden' }}
+        </span>
+      </div>
+      <pre class="bg-gray-100 dark:bg-gray-700 dark:text-white p-4 rounded text-sm"><code>const isVisible = ref(false)
+// Changes automatically sync
+&lt;Tooltip v-model="isVisible" ...&gt;</code></pre>
+    </section>
+
+    <!-- Method 3: Directive + TooltipControl -->
+    <section class="space-y-4">
+      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+        Method 3: Directive + TooltipControl API
+      </h3>
+      <div class="flex gap-2 items-center">
+        <button
+          v-tooltip="{ content: 'Controlled via TooltipControl API', id: 'controlled-tooltip' }"
+          class="px-4 py-2 bg-blue-500 text-white rounded"
+        >
+          Target Element
+        </button>
+        <button class="px-3 py-1 bg-green-600 text-white rounded text-sm" @click="showDirectiveTooltip">
+          Show
+        </button>
+        <button class="px-3 py-1 bg-red-600 text-white rounded text-sm" @click="hideDirectiveTooltip">
+          Hide
+        </button>
+      </div>
+      <pre class="bg-gray-100 dark:bg-gray-700 dark:text-white p-4 rounded text-sm"><code>import { TooltipControl } from 'vue-custom-tooltip'
+TooltipControl.show('controlled-tooltip')
+TooltipControl.hide('controlled-tooltip')</code></pre>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+button {
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+button:active {
+  transform: translateY(0);
+}
+</style>
diff --git a/src/components/showcase/TooltipExample.vue b/src/components/showcase/TooltipExample.vue
index 6d06d50..d6772ae 100644
--- a/src/components/showcase/TooltipExample.vue
+++ b/src/components/showcase/TooltipExample.vue
@@ -1,14 +1,32 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import type { TooltipExposed } from '@/types/tooltip'
+import { ref, useTemplateRef } from 'vue'
 import Button from '@/components/Button.vue'
 
 const btnLabel = ref('Click me to change!')
 const tooltipMsg = ref('Click this Button, it will change the button text and tooltip text')
 
+// Programmatic control refs
+const tooltipRef = useTemplateRef<TooltipExposed | null>('tooltipRef')
+const vModelVisible = ref(false)
+
 function onClick(message: string) {
   btnLabel.value = message
   tooltipMsg.value = message
 }
+
+// Programmatic control functions
+function showTooltip() {
+  tooltipRef.value?.show()
+}
+
+function hideTooltip() {
+  tooltipRef.value?.hide()
+}
+
+function toggleTooltip() {
+  tooltipRef.value?.toggle()
+}
 </script>
 
 <template>
@@ -41,12 +59,55 @@ function onClick(message: string) {
       </div>
     </div>
 
+    <!-- Programmatic Control -->
+    <div class="flex flex-col gap-4">
+      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+        Programmatic Control
+      </h3>
+      <p class="text-sm text-gray-600 dark:text-gray-400">
+        Control tooltips programmatically using refs, v-model, or the TooltipControl API for directives.
+      </p>
+
+      <!-- Component with ref -->
+      <div class="space-y-2">
+        <h4 class="text-md font-medium text-gray-700 dark:text-gray-300">
+          Using Component Ref
+        </h4>
+        <div class="flex gap-2 items-center">
+          <Tooltip ref="tooltipRef" content="Controlled programmatically via ref">
+            <Button label="Target element" />
+          </Tooltip>
+          <Button label="Show" size="small" @click="showTooltip" />
+          <Button label="Hide" size="small" @click="hideTooltip" />
+          <Button label="Toggle" size="small" @click="toggleTooltip" />
+        </div>
+      </div>
+
+      <!-- Component with v-model -->
+      <div class="space-y-2">
+        <h4 class="text-md font-medium text-gray-700 dark:text-gray-300">
+          Using v-model
+        </h4>
+        <div class="flex gap-2 items-center">
+          <Tooltip v-model="vModelVisible" content="Controlled via v-model">
+            <Button label="Target element" />
+          </Tooltip>
+          <Button label="Show" size="small" @click="vModelVisible = true" />
+          <Button label="Hide" size="small" @click="vModelVisible = false" />
+          <Button label="Toggle" size="small" @click="vModelVisible = !vModelVisible" />
+          <span class="text-sm text-gray-600 dark:text-gray-400">
+            State: {{ vModelVisible ? 'Visible' : 'Hidden' }}
+          </span>
+        </div>
+      </div>
+    </div>
+
     <!-- Auto mode (default) -->
     <div class="space-y-2">
       <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
         Auto Mode (Default)
       </h3>
-      <p class="text-sm text-gray-800 dark:text-gray-200">
+      <p class="text-sm text-gray-600 dark:text-gray-400">
         Automatically detects both OS dark mode and Tailwind's .dark class
       </p>
 
@@ -66,7 +127,7 @@ function onClick(message: string) {
       <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
         Force Dark/Light Mode
       </h3>
-      <p class="text-sm text-gray-800 dark:text-gray-200">
+      <p class="text-sm text-gray-600 dark:text-gray-400">
         Always uses dark/light theme, regardless of system or class settings
       </p>
 
diff --git a/src/components/tooltip/Tooltip.vue b/src/components/tooltip/Tooltip.vue
index 88c0bdd..d707772 100644
--- a/src/components/tooltip/Tooltip.vue
+++ b/src/components/tooltip/Tooltip.vue
@@ -40,7 +40,7 @@
  * - Unique IDs for tooltip-trigger association
  */
 
-import type { TooltipProps, TooltipSlots } from '../../types/tooltip'
+import type { TooltipExposed, TooltipProps, TooltipSlots } from '../../types/tooltip'
 import { computed, nextTick, useSlots, useTemplateRef, watch } from 'vue'
 
 import {
@@ -61,7 +61,7 @@ import { getTooltipGlobalThemeRef } from '../../config/index'
  */
 
 // Re-export types for external use
-export type { TooltipProps, TooltipSlots }
+export type { TooltipExposed, TooltipProps, TooltipSlots }
 
 const props = withDefaults(defineProps<TooltipProps>(), {
   position: undefined,
@@ -75,7 +75,14 @@ const props = withDefaults(defineProps<TooltipProps>(), {
   offset: undefined,
   dark: undefined,
   externalTrigger: undefined,
+  modelValue: undefined,
+  id: undefined,
 })
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
 defineSlots<{
   default: () => any
   content?: () => any
@@ -129,9 +136,11 @@ const {
 
 const {
   isVisible,
-  show,
-  hide,
-  toggle,
+  show: showInternal,
+  hide: hideInternal,
+  toggle: toggleInternal,
+  showImmediate,
+  hideImmediate,
 } = useTooltipVisibility(
   effectiveDisabled,
   effectiveShowDelay,
@@ -139,6 +148,53 @@ const {
   calculatePosition,
 )
 
+// Sync with v-model
+watch(isVisible, (newValue) => {
+  if (props.modelValue !== undefined && newValue !== props.modelValue) {
+    emit('update:modelValue', newValue)
+  }
+})
+
+// Watch for external v-model changes
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== undefined && newValue !== isVisible.value) {
+    if (newValue) {
+      showImmediate()
+    }
+    else {
+      hideImmediate()
+    }
+  }
+})
+
+// Wrapper functions for normal event-driven behavior
+function show() {
+  showInternal()
+}
+
+function hide() {
+  hideInternal()
+}
+
+function toggle() {
+  toggleInternal()
+}
+
+// Expose methods for programmatic control
+defineExpose<TooltipExposed>({
+  show: showImmediate,
+  hide: hideImmediate,
+  toggle: () => {
+    if (isVisible.value) {
+      hideImmediate()
+    }
+    else {
+      showImmediate()
+    }
+  },
+  isVisible: () => isVisible.value,
+})
+
 const {
   handleMouseEnter,
   handleMouseLeave,
diff --git a/src/composables/useExternalTrigger.ts b/src/composables/useExternalTrigger.ts
index 6e61474..7e0d22c 100644
--- a/src/composables/useExternalTrigger.ts
+++ b/src/composables/useExternalTrigger.ts
@@ -1,4 +1,4 @@
-import type { ComputedRef, Ref } from 'vue'
+import type { ComputedRef } from 'vue'
 import { onUnmounted, watch } from 'vue'
 
 /**
diff --git a/src/composables/useTooltipProps.ts b/src/composables/useTooltipProps.ts
index 4bc9d76..61219a5 100644
--- a/src/composables/useTooltipProps.ts
+++ b/src/composables/useTooltipProps.ts
@@ -7,7 +7,7 @@ import { getReactiveGlobalConfig } from '../config/globalConfig'
 /**
  * Default values for tooltip props
  */
-export const DEFAULT_TOOLTIP_PROPS: Readonly<Required<Omit<TooltipProps, 'content' | 'externalTrigger'>>> = {
+export const DEFAULT_TOOLTIP_PROPS: Readonly<Required<Omit<TooltipProps, 'content' | 'externalTrigger' | 'modelValue' | 'id'>>> = {
   position: 'auto',
   trigger: 'both',
   showDelay: 100,
diff --git a/src/composables/useTooltipVisibility.ts b/src/composables/useTooltipVisibility.ts
index ff73681..fe9b733 100644
--- a/src/composables/useTooltipVisibility.ts
+++ b/src/composables/useTooltipVisibility.ts
@@ -58,6 +58,22 @@ export function useTooltipVisibility(
     }, showDelay.value)
   }
 
+  /**
+   * Shows the tooltip immediately without delay (for programmatic control)
+   */
+  async function showImmediate() {
+    clearTimeouts()
+    _isVisible.value = true
+    await nextTick()
+    // Wait for the browser to render the tooltip with proper dimensions
+    await new Promise(resolve => requestAnimationFrame(resolve))
+
+    // Execute callback after tooltip is visible and rendered
+    if (onShow) {
+      await onShow()
+    }
+  }
+
   /**
    * Hides the tooltip after the configured delay
    */
@@ -71,6 +87,14 @@ export function useTooltipVisibility(
     }, hideDelay.value)
   }
 
+  /**
+   * Hides the tooltip immediately without delay (for programmatic control)
+   */
+  function hideImmediate() {
+    clearTimeouts()
+    _isVisible.value = false
+  }
+
   /**
    * Toggles the tooltip visibility
    */
@@ -97,6 +121,8 @@ export function useTooltipVisibility(
     show,
     hide,
     toggle,
+    showImmediate,
+    hideImmediate,
     clearTimeouts,
   }
 }
diff --git a/src/directives/tooltip.ts b/src/directives/tooltip.ts
index 892d63c..ee57060 100644
--- a/src/directives/tooltip.ts
+++ b/src/directives/tooltip.ts
@@ -24,6 +24,7 @@ interface TooltipInstance {
   id: string
   element: HTMLElement
   props: TooltipProps
+  componentRef?: any
 }
 
 // Shared state for all tooltip instances
@@ -31,6 +32,53 @@ const tooltipStore = reactive({
   tooltips: new Map<string, TooltipInstance>(),
 })
 
+/**
+ * Public API for programmatic tooltip control
+ */
+export const TooltipControl = {
+  /**
+   * Show a tooltip by ID
+   * @param id - The tooltip ID
+   */
+  show(id: string): void {
+    const instance = tooltipStore.tooltips.get(id)
+    if (instance?.componentRef) {
+      instance.componentRef.show()
+    }
+  },
+
+  /**
+   * Hide a tooltip by ID
+   * @param id - The tooltip ID
+   */
+  hide(id: string): void {
+    const instance = tooltipStore.tooltips.get(id)
+    if (instance?.componentRef) {
+      instance.componentRef.hide()
+    }
+  },
+
+  /**
+   * Toggle a tooltip by ID
+   * @param id - The tooltip ID
+   */
+  toggle(id: string): void {
+    const instance = tooltipStore.tooltips.get(id)
+    if (instance?.componentRef) {
+      instance.componentRef.toggle()
+    }
+  },
+
+  /**
+   * Check if a tooltip is visible
+   * @param id - The tooltip ID
+   */
+  isVisible(id: string): boolean {
+    const instance = tooltipStore.tooltips.get(id)
+    return instance?.componentRef ? instance.componentRef.isVisible() : false
+  },
+}
+
 // Single shared Vue app instance
 let sharedApp: App | null = null
 let appContainer: HTMLElement | null = null
@@ -130,6 +178,15 @@ function initializeSharedApp() {
       const tooltipComponents = Array.from(this.tooltips.values() as IterableIterator<TooltipInstance>).map((instance) => {
         return h(Tooltip, {
           key: instance.id,
+          ref: (el: any) => {
+            // Capture component ref for programmatic control
+            if (el) {
+              const tooltipInstance = tooltipStore.tooltips.get(instance.id)
+              if (tooltipInstance) {
+                tooltipInstance.componentRef = el
+              }
+            }
+          },
           ...instance.props,
           externalTrigger: instance.element,
         })
@@ -149,9 +206,11 @@ function addTooltipInstance(element: HTMLElement, binding: TooltipDirectiveBindi
   // Initialize shared app if needed
   initializeSharedApp()
 
-  const id = generateTooltipInstanceId()
   const props = getTooltipProps(binding)
 
+  // Use custom ID if provided, otherwise generate one
+  const id = props.id || generateTooltipInstanceId()
+
   // Add to reactive store (triggers re-render)
   tooltipStore.tooltips.set(id, {
     id,
diff --git a/src/index.ts b/src/index.ts
index db1195f..06f0524 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,10 +3,10 @@ import type { App, Plugin } from 'vue'
 import type { TooltipProps, TooltipTheme } from './types/tooltip'
 import Tooltip from './components/tooltip/Tooltip.vue'
 import { setTooltipGlobalConfig, setTooltipGlobalTheme } from './config/index'
-import { vTooltip } from './directives/tooltip'
+import { TooltipControl, vTooltip } from './directives/tooltip'
 
 // Export components and directives
-export { Tooltip, vTooltip }
+export { Tooltip, TooltipControl, vTooltip }
 
 // Export composables for advanced usage
 export * from './composables'
@@ -14,7 +14,7 @@ export * from './composables'
 // Export configuration functions
 export { getTooltipGlobalConfig, getTooltipGlobalTheme, resetTooltipGlobalConfig, setTooltipGlobalConfig, setTooltipGlobalTheme } from './config/index'
 
-export type { TooltipProps, TooltipSlots, TooltipTheme } from './types/tooltip'
+export type { TooltipExposed, TooltipProps, TooltipSlots, TooltipTheme } from './types/tooltip'
 // Export types
 export type {
   TooltipDirectiveModifiers,
diff --git a/src/types/tooltip.ts b/src/types/tooltip.ts
index bf5aad2..ac373d3 100644
--- a/src/types/tooltip.ts
+++ b/src/types/tooltip.ts
@@ -97,6 +97,46 @@ export interface TooltipProps {
    * @default undefined
    */
   externalTrigger?: HTMLElement
+
+  /**
+   * Controls the visibility of the tooltip (for v-model support)
+   * @default false
+   */
+  modelValue?: boolean
+
+  /**
+   * Unique identifier for the tooltip (used for programmatic control in directive mode)
+   * @default undefined
+   */
+  id?: string
+}
+
+/**
+ * Methods exposed by the Tooltip component for programmatic control
+ */
+export interface TooltipExposed {
+  /**
+   * Programmatically show the tooltip
+   * Bypasses delays and disabled state for immediate display
+   */
+  show: () => void
+
+  /**
+   * Programmatically hide the tooltip
+   * Bypasses delays for immediate hiding
+   */
+  hide: () => void
+
+  /**
+   * Toggle the tooltip visibility
+   * Bypasses delays and disabled state
+   */
+  toggle: () => void
+
+  /**
+   * Check if the tooltip is currently visible
+   */
+  isVisible: () => boolean
 }
 
 /**