How to Use Bootstrap Tooltip in Vue 3 – The Right Way with CoreUI
Łukasz Holeczek Follow Łukasz Holeczek on Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)
Using Bootstrap in Vue 3? You’ve probably noticed that native Bootstrap tooltips don’t play well with Vue’s reactive and declarative nature. Bootstrap still relies on imperative DOM access — not ideal for Vue’s component-driven architecture.
Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.
In this guide, you’ll learn how to use Bootstrap-style tooltips in Vue 3 using the CTooltip component from CoreUI for Vue.js — with no need for manual JavaScript, no data-bs-toggle, and no Popper.js setup.
👤 Who is this for?
This article is for you if:
- You use Vue 3 + Bootstrap styles in your project.
- You want declarative, accessible tooltips that follow Vue’s reactive flow.
- You want to avoid
v-on:mouseover+refhacks. - You care about accessibility, mobile support, and SSR compatibility.
🧨 Why Bootstrap’s Native Tooltip Doesn’t Work Well in Vue
Bootstrap (even v5) assumes you manipulate the DOM directly and manually:
new bootstrap.Tooltip(document.querySelector('#btn'))
That approach breaks in Vue because:
| Problem | Vue Impact |
|---|---|
| Direct DOM access | Bypasses Vue’s reactivity system |
| No declarative control | Can’t bind tooltip to reactive data |
| Manual cleanup required | Needs teardown on unmount |
| Not SSR-friendly | Errors on server-rendered content |
✅ The Vue 3 Way: CTooltip from CoreUI for Vue
CoreUI for Vue provides a CTooltip component that:
- Renders Bootstrap-style tooltips declaratively.
- Works with any element or custom component.
- Requires no third-party plugins.
- Supports accessibility out of the box.
⚙️ Example: Tooltip on a Button
<template>
<CTooltip content="Delete item permanently" placement="top">
<CButton color="danger" variant="outline">
<CIcon :icon="cilTrash" />
</CButton>
</CTooltip>
</template>
<script setup>
import { CTooltip, CButton, CIcon } from '@coreui/vue'
import { cilTrash } from '@coreui/icons'
</script>
🧪 Features You Get Automatically
| Feature | ✅ Support |
|---|---|
| Bootstrap 5 styling | ✅ |
| Declarative usage in templates | ✅ |
| Keyboard accessibility (ESC/focus) | ✅ |
| Placement options (top, bottom, etc.) | ✅ |
| Works with SSR / Nuxt | ✅ |
No Popper.js config needed | ✅ |
⚙️ Customizing Tooltip Behavior
You can pass additional props to CTooltip:
<CTooltip
content="Click to edit"
placement="bottom"
:trigger="['hover', 'focus']"
:animation="true"
>
<CButton color="secondary">Edit</CButton>
</CTooltip>
Props:
content: string or slotplacement:top,bottom,left,right, etc.trigger: array of trigger types (hover,focus,click)animation: toggle fade animation
🤔 When Not to Use CTooltip
Consider other solutions if:
- You need interactive content inside tooltips (then use
CPopoverinstead). - You need fully custom logic, like programmatic show/hide.
- You don’t use Bootstrap styles at all (Tailwind/Headless-only projects).
❓ FAQ
Can I use tooltips on icons, links, or inputs?
Yes. Just wrap any element inside CTooltip.
Is this tooltip SSR-safe?
Yes — it’s declarative and lifecycle-aware. Works with Nuxt 3 and Vue 3 SSR setups.
Does it support dark mode?
Yes — inherits Bootstrap dark theme styles if enabled.
🧠 Why this matters
Bootstrap tooltips look great — but the native JS implementation doesn’t scale well in Vue apps. With CTooltip, you get:
- A Vue-native API with reactivity.
- Zero DOM refs or setup code.
- Fully accessible, production-ready components.
📌 Next steps
- 📘 CTooltip Docs for Vue
- 🚀 Explore the Vue Admin Template
- 💬 Join the CoreUI Community
Build modern UIs with the simplicity of Vue and the polish of Bootstrap. CoreUI for Vue gives you both — with clean APIs and full accessibility.
