Interactive Examples
Examples showcasing interactive tooltip patterns including click-triggered tooltips, dynamic content, coordinated tooltips, and programmatic control.
Click-Triggered Tooltips
Toggle on Click
The tooltip above uses click-triggered mode. Click anywhere else to dismiss it.
Show code
vue
<script setup>
import { ref } from 'vue'
const message = ref('Click to dismiss')
</script>
<template>
<div class="space-y-4">
<Tooltip :content="message" trigger="click">
<Button label="Click me!" />
</Tooltip>
<p class="text-sm text-gray-600 dark:text-gray-400">
The tooltip above uses click-triggered mode. Click anywhere else to dismiss it.
</p>
</div>
</template>vue
<template>
<div class="space-y-4">
<Button v-tooltip.click="'Click to dismiss'" label="Click me!" />
<p class="text-sm text-gray-600 dark:text-gray-400">
The tooltip above uses click-triggered mode. Click anywhere else to dismiss it.
</p>
</div>
</template>Dynamic Content
Reactive Tooltip Content
Tooltip content updates every time you click the button.
Show code
vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
const getMessage = () => `You've clicked ${count.value} times`
</script>
<template>
<div class="flex flex-col gap-4 items-start">
<Tooltip :content="getMessage()">
<Button @click="count++" label="Click to increment" />
</Tooltip>
<p class="text-sm text-gray-600 dark:text-gray-400">
Tooltip content updates every time you click the button.
</p>
</div>
</template>Interactive Tooltip Content
Rich Content with Actions
Show code
vue
<script setup>
import { ref } from 'vue'
const copied = ref(false)
const code = 'npm install @borstihd/vue-custom-tooltip'
function copyToClipboard() {
navigator.clipboard.writeText(code)
copied.value = true
setTimeout(() => {
copied.value = false
}, 2000)
}
</script>
<template>
<Tooltip trigger="click">
<Button label="Show install command" />
<template #content>
<div class="p-4 max-w-xs">
<p class="text-sm mb-3">Install with npm:</p>
<div class="bg-gray-800 text-gray-200 rounded p-2 mb-3 text-xs font-mono break-words">
{{ code }}
</div>
<Button
:label="copied ? 'Copied!' : 'Copy command'"
@click="copyToClipboard"
class="w-full text-sm"
/>
</div>
</template>
</Tooltip>
</template>Interactive Counter
Show code
vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
function decrement() {
count.value = Math.max(0, count.value - 1)
}
function reset() {
count.value = 0
}
</script>
<template>
<Tooltip trigger="click">
<Button label="Open counter" />
<template #content>
<div class="p-4 text-center">
<p class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">
{{ count }}
</p>
<div class="flex gap-2">
<Button label="−" @click="decrement" />
<Button label="Reset" @click="reset" />
<Button label="+" @click="increment" />
</div>
</div>
</template>
</Tooltip>
</template>Programmatic Control
Show/Hide Tooltips with Buttons
Show code
vue
<script setup>
import { ref, useTemplateRef } from 'vue'
const tooltipRef = useTemplateRef('tooltipRef')
function showTooltip() {
tooltipRef.value?.show()
}
function hideTooltip() {
tooltipRef.value?.hide()
}
function toggleTooltip() {
tooltipRef.value?.toggle()
}
</script>
<template>
<div class="space-y-4">
<div class="flex gap-2">
<Tooltip ref="tooltipRef" content="I'm controlled programmatically!">
<Button label="Target" />
</Tooltip>
<Button label="Show" @click="showTooltip" />
<Button label="Hide" @click="hideTooltip" />
<Button label="Toggle" @click="toggleTooltip" />
</div>
</div>
</template>vue
<script setup>
import { TooltipControl } from '@borstihd/vue-custom-tooltip'
function showTooltip() {
TooltipControl.show('demo-tooltip')
}
function hideTooltip() {
TooltipControl.hide('demo-tooltip')
}
function toggleTooltip() {
TooltipControl.toggle('demo-tooltip')
}
</script>
<template>
<div class="space-y-4">
<div class="flex gap-2 flex-wrap">
<Button v-tooltip="{ content: 'Controlled!', id: 'demo-tooltip' }" label="Target" />
<Button label="Show" @click="showTooltip" />
<Button label="Hide" @click="hideTooltip" />
<Button label="Toggle" @click="toggleTooltip" />
</div>
</div>
</template>v-model Control
Current state: Hidden
Show code
vue
<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>
<template>
<div class="space-y-4">
<div class="flex gap-2 items-center">
<Tooltip v-model="isVisible" content="Controlled via v-model" position="top">
<Button label="Target" />
</Tooltip>
<Button label="Show" @click="isVisible = true" />
<Button label="Hide" @click="isVisible = false" />
<Button label="Toggle" @click="isVisible = !isVisible" />
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">
Current state: <strong>{{ isVisible ? 'Visible' : 'Hidden' }}</strong>
</p>
</div>
</template>Coordinated Tooltips
Show Multiple Tooltips at Once
Show code
vue
<script setup>
import { TooltipControl } from '@borstihd/vue-custom-tooltip'
function showAll() {
TooltipControl.show('first-tooltip')
TooltipControl.show('second-tooltip')
TooltipControl.show('third-tooltip')
}
function hideAll() {
TooltipControl.hide('first-tooltip')
TooltipControl.hide('second-tooltip')
TooltipControl.hide('third-tooltip')
}
</script>
<template>
<div class="space-y-4">
<div class="flex gap-2 flex-wrap mb-4">
<Button
v-tooltip="{ content: 'First step', id: 'first-tooltip', position: 'top' }"
label="Step 1"
/>
<Button
v-tooltip="{ content: 'Second step', id: 'second-tooltip', position: 'top' }"
label="Step 2"
/>
<Button
v-tooltip="{ content: 'Third step', id: 'third-tooltip', position: 'top' }"
label="Step 3"
/>
</div>
<div class="flex gap-2">
<Button label="Show All" @click="showAll" />
<Button label="Hide All" @click="hideAll" />
</div>
</div>
</template>