How to build a tooltip in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Tooltips provide contextual information on hover without cluttering the interface, improving user experience with helpful hints and descriptions. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented tooltip systems in Vue applications throughout my 11 years of Vue development. The most maintainable approach is creating a reusable tooltip component with Composition API and conditional rendering on hover. This method ensures consistent tooltip behavior across the application with minimal code duplication.
Create a reusable tooltip component with hover state and absolute positioning.
<template>
<div
class="tooltip-wrapper"
@mouseenter="isVisible = true"
@mouseleave="isVisible = false"
>
<slot></slot>
<div v-if="isVisible" class="tooltip">
{{ text }}
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
text: {
type: String,
required: true
}
})
const isVisible = ref(false)
</script>
<style scoped>
.tooltip-wrapper {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 0.5rem 0.75rem;
border-radius: 4px;
font-size: 0.875rem;
white-space: nowrap;
margin-bottom: 0.5rem;
}
.tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333;
}
</style>
Here the tooltip-wrapper uses mouseenter and mouseleave events to control tooltip visibility. The slot allows wrapping any content with tooltip functionality. The v-if directive conditionally renders the tooltip based on isVisible state. Absolute positioning places the tooltip above the wrapped content, while transform: translateX(-50%) centers it horizontally. The ::after pseudo-element creates a small arrow pointing to the target element.
Best Practice Note:
This is the tooltip implementation we use in CoreUI Vue components for consistent contextual help. Add delay timers to prevent tooltips from flickering on quick mouse movements, implement position detection to flip tooltips when near viewport edges, and use Teleport for tooltips that might be clipped by parent overflow: hidden containers.
