Tooltips
Vue Bootstrap 5 Tooltip component
Documentation and examples for adding custom tooltips with CSS and JavaScript using CSS3 for animations and data-mdb-attributes for local title storage.
Note: Read the API tab to find all available options and advanced customization
Basic example
<template>
<p>
Hover the link to see the
<MDBTooltip v-model="tooltip1" tag="a">
<template #reference>
<a href="#">tooltip</a>
</template>
<template #tip>
Hi! I'm tooltip
</template>
</MDBTooltip>
</p>
</template>
<script>
import { MDBTooltip } from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBTooltip
},
setup() {
const tooltip1 = ref(false);
return {
tooltip1
}
}
};
</script>
<script setup lang="ts">
import { MDBTooltip } from "mdb-vue-ui-kit";
import { ref } from 'vue';
const tooltip1 = ref(false);
</script>
Overview
Things to know when using the tooltip plugin:
- Tooltips with zero-length
tipslot values are never displayed. - Triggering tooltips on hidden elements will not work.
-
Tooltips for
.disabledordisabledelements must be triggered on a wrapper element. -
When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use
white-space: nowrap;on your#referenceslot content to avoid this behavior. - Tooltips must be hidden before their corresponding elements have been removed from the DOM.
- Tooltips can be triggered thanks to an element inside a shadow DOM.
Four directions
Four options are available: top, right, bottom, and left aligned for
direction property.
<template>
<MDBTooltip v-model="tooltip2">
<template #reference>
<MDBBtn color="secondary">Tooltip on top</MDBBtn>
</template>
<template #tip>
Tooltip on top
</template>
</MDBTooltip>
<MDBTooltip v-model="tooltip3" direction="right">
<template #reference>
<MDBBtn color="secondary">Tooltip on right</MDBBtn>
</template>
<template #tip>
Tooltip on right
</template>
</MDBTooltip>
<MDBTooltip v-model="tooltip4" direction="bottom">
<template #reference>
<MDBBtn color="secondary">Tooltip on bottom</MDBBtn>
</template>
<template #tip>
Tooltip on bottom
</template>
</MDBTooltip>
<MDBTooltip v-model="tooltip5" direction="left">
<template #reference>
<MDBBtn color="secondary">Tooltip on left</MDBBtn>
</template>
<template #tip>
Tooltip on left
</template>
</MDBTooltip>
</template>
<script>
import { MDBTooltip, MDBBtn} from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBTooltip,
MDBBtn
},
setup() {
const tooltip2 = ref(false);
const tooltip3 = ref(false);
const tooltip4 = ref(false);
const tooltip5 = ref(false);
return {
tooltip2,
tooltip3,
tooltip4,
tooltip5,
}
}
};
</script>
<script setup lang="ts">
import { MDBTooltip, MDBBtn} from "mdb-vue-ui-kit";
import { ref } from 'vue';
const tooltip2 = ref(false);
const tooltip3 = ref(false);
const tooltip4 = ref(false);
const tooltip5 = ref(false);
</script>
And with custom HTML added:
<template>
<MDBTooltip v-model="tooltip6">
<template #reference>
<MDBBtn color="secondary">Tooltip with HTML</MDBBtn>
</template>
<template #tip>
<em>Tooltip</em> <u>with</u> <b>HTML</b>
</template>
</MDBTooltip>
</template>
<script>
import { MDBTooltip, MDBBtn} from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBTooltip,
MDBBtn
},
setup() {
const tooltip6 = ref(false);
return {
tooltip6,
}
}
};
</script>
<script setup lang="ts">
import { MDBTooltip, MDBBtn} from "mdb-vue-ui-kit";
import { ref } from 'vue';
const tooltip6 = ref(false);
</script>
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", and override the
pointer-events on the disabled element.
<template>
<MDBTooltip v-model="tooltip7">
<template #reference>
<MDBBtn color="primary" disabled>Disabled button</MDBBtn>
</template>
<template #tip>
Disabled tooltip
</template>
</MDBTooltip>
</template>
<script>
import { MDBTooltip, MDBBtn} from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBTooltip,
MDBBtn
},
setup() {
const tooltip7 = ref(false);
return {
tooltip7,
}
}
};
</script>
<script setup lang="ts">
import { MDBTooltip, MDBBtn} from "mdb-vue-ui-kit";
import { ref } from 'vue';
const tooltip7 = ref(false);
</script>
Tooltips - API
Import
<script>
import {
MDBTooltip
} from 'mdb-vue-ui-kit';
</script>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
arrow |
Boolean | false |
Adds an arrow to a popver element |
boundary |
String | 'clippingParents' |
Overflow constraint boundary of the tooltip (applied only for the preventOverflow modifier of the Popper).
Accepts the values of
'viewport', 'window', 'scrollParent', or an
HTMLElement selector. For more information refer to Popper's
detectOverflow docs.
|
tag |
String | "span" |
Defines tag element wrapping reference slot. |
reference |
String | "" |
Sets custom selector for reference element instead of slot |
popover |
String | " |
Sets custom selector for popover content to be used as tooltip |
options |
Object | Function | {} |
To change Bootstrap's default Popper config, see Popper's configuration |
offset |
String | " |
Offset of the tooltip relative to its target. |
direction |
String | "top |
Position the tooltip relative to its target - top | bottom | left | right. |
maxWidth |
Number | 276 |
Sets max width of the popover element |
Slots
| Name | Description | Example |
|---|---|---|
reference |
Tooltip triggering action target |
<template #reference><MDBBtn color="danger" size="lg"
@click="tooltip1 = !tooltip1">Click to toggle
tooltip</MDBBtn></template>
|
tip |
Slotted content will be wrapped in a div.tooltip and used as such |
<template #tip>Hi! I'm tooltip</template>
|
[default] |
If you place something within MDBTooltip without specifying slots, it
will be used similarly to the tip slot, yet the content shall still
require wrapping in a div.tooltip.
|
<MDBTooltip><div class="tooltip"> This is a
tooltip</div><template #tip>Hi! I'm
tooltip</template></MDBTooltip>
|
CSS variables
As part of MDB’s evolving CSS variables approach, tolltips now use local CSS variables on
.tooltip for enhanced real-time customization. Values for the CSS variables
are set via Sass, so Sass customization is still supported, too.
// .tooltip
--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
--#{$prefix}tooltip-font-size: #{$tooltip-font-size};
SCSS variables
$tooltip-max-width: 200px;
$tooltip-opacity: 0.9;
$tooltip-margin: null;
$tooltip-arrow-width: 0.8rem;
$tooltip-arrow-height: 0.4rem;
$tooltip-arrow-color: null;
$tooltip-color: var(--#{$prefix}surface-inverted-color);
$tooltip-padding-y: 6px;
$tooltip-padding-x: 16px;
$tooltip-font-size: 14px;
$tooltip-bg: var(--#{$prefix}surface-inverted-bg);
$tooltip-border-radius: 0.25rem;