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

Hover the link to see the tooltip 

<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 tip slot values are never displayed.
  • Triggering tooltips on hidden elements will not work.
  • Tooltips for .disabled or disabled elements 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 #reference slot 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="secondary" 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};
--#{$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-color: #fff;
$tooltip-padding-y: 6px;
$tooltip-padding-x: 16px;
$tooltip-font-size: 14px;
$tooltip-bg: #6d6d6d;
$tooltip-border-radius: 0.25rem;