Bootstrap Vue Tooltip Component and Directive
Documentation and examples for adding Bootstrap Vue Tooltips.
On this page
Examples
Hover over the links below to see tooltips:
Tight pants next level keffiyeh you probably 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 have a 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 whatever keytar scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
<p class="text-medium-emphasis">
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Component
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap Vue in RTL.
<CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="top">
<template #toggler="{ on }">
<CButton color="secondary" v-on="on">Tooltip on top</CButton>
</template>
</CTooltip>
<CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="right">
<template #toggler="{ on }">
<CButton color="secondary" v-on="on">Tooltip on right</CButton>
</template>
</CTooltip>
<CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="bottom">
<template #toggler="{ on }">
<CButton color="secondary" v-on="on">Tooltip on bottom</CButton>
</template>
</CTooltip>
<CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus" placement="left">
<template #toggler="{ on }">
<CButton color="secondary" v-on="on">Tooltip on left</CButton>
</template>
</CTooltip>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Directive
<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>
1
2
3
4
2
3
4
API
CTooltip
import { CTooltip } from '@coreui/bootstrap-vue'
// or
import CTooltip from '@coreui/bootstrap-vue/src/components/tooltip/CTooltip'
1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| content | Content for your component. If you want to pass non-string value please use dedicated slot <template #content>...</template> | string | - | - |
| offset | Offset of the tooltip relative to its target. | array | - | [0, 0] |
| placement | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement | - | 'top' |
| trigger | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | string | string[] | 'click', 'focus', 'hover' | 'hover' |
| visible | Toggle the visibility of tooltip component. | boolean | - |
Events
| Event name | Description | Properties |
|---|---|---|
| hide | Callback fired when the component requests to be hidden. | |
| show | Callback fired when the component requests to be shown. |