Bootstrap 5 components designed for Vue.js
This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.
If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use CoreUI’s Vue Tooltip component with Bootstrap styles for flexible, framework-consistent UI.
Examples
Tooltips on links
Hover over the links below to see tooltips:
<template>
<p class="text-body-secondary">
Tight pants next level keffiyeh
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel
<CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu
biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic
artisan
<CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink>
scenester farm-to-table banksy Austin
<CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
freegan cred raw denim single-origin coffee viral.
</p>
</template>
<script setup>
import { CLink } from '@coreui/vue'
const customTooltipStyle = {
'--cui-tooltip-bg': 'var(--cui-primary)',
}
</script>Component
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.
<template>
<CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="top">
<template #toggler="{ id, on }">
<CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on top</CButton>
</template>
</CTooltip>
<CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="right">
<template #toggler="{ id, on }">
<CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on right</CButton>
</template>
</CTooltip>
<CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="bottom">
<template #toggler="{ id, on }">
<CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on bottom</CButton>
</template>
</CTooltip>
<CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="left">
<template #toggler="{ id, on }">
<CButton color="secondary" :aria-describedby="id" v-on="on">Tooltip on left</CButton>
</template>
</CTooltip>
</template>
<script setup>
import { CTooltip, CButton } from '@coreui/vue'
const customTooltipStyle = {
'--cui-tooltip-bg': 'var(--cui-primary)',
}
</script>Directive
<template>
<CButton
color="secondary"
v-c-tooltip="{
content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'top',
}"
>Tooltip on top</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'right',
}"
>Tooltip on right</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'bottom',
}"
>Tooltip on bottom</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'left',
}"
>Tooltip on left</CButton
>
</template>
<script setup>
import { CButton } from '@coreui/vue'
const customTooltipStyle = {
'--cui-tooltip-bg': 'var(--cui-primary)',
}
</script>Custom tooltips
You can customize the appearance of tooltips using CSS variables. We set a custom style to scope our custom appearance and use it to override some of the local CSS variables.
<template>
<CTooltip
content="This top tooltip is themed via CSS variables."
placement="top"
:style="customTooltipStyle"
>
<template #toggler="{ id, on }">
<CButton color="secondary" :aria-describedby="id" v-on="on">Custom tooltip</CButton>
</template>
</CTooltip>
</template>
<script setup>
import { CTooltip, CButton } from '@coreui/vue'
const customTooltipStyle = {
'--cui-tooltip-bg': 'var(--cui-primary)',
}
</script>Usage
Disabled elements
Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".
<template>
<CTooltip content="Disabled tooltip">
<template #toggler="{ id, on }">
<span class="d-inline-block" :tabindex="0" :aria-describedby="id" v-on="on">
<CButton color="primary" disabled>Disabled button</CButton>
</span>
</template>
</CTooltip>
</template>
<script setup>
import { CTooltip, CButton } from '@coreui/vue'
const customTooltipStyle = {
'--cui-tooltip-bg': 'var(--cui-primary)',
}
</script>