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>
        

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>
        

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>
        

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>
        

Tooltips - API


Import


        <script>
          import {
            MDBTooltip
          } from 'mdb-vue-ui-kit';
        </script>
      

Properties

Property Type Default Description Example
tag String "span" Defines tag element wrapping reference slot. <MDBTooltip tag="div" />
reference String "" Sets custom selector for reference element instead of slot <MDBTooltip reference="#reference-element" />
popover String " Sets custom selector for popover content to be used as tooltip <MDBTooltip popover="#poopver-element" />
options Object {} Allows to change the default Popper config, see Popper's configuration. <MDBTooltip options={{ modifiers: [{ name: 'offset', options: { offset: [10, 20] }}]}} />
offset String " Offset of the tooltip relative to its target. <MDBTooltip offset="0, 10" />
direction String "top Position the tooltip relative to its target - top | bottom | left | right. <MDBTooltip direction="bottom" />
maxWidth Number 276 Sets max width of the popover element <MDBTooltip :maxWidth="300" />
arrow Boolean false Adds an arrow to a popver element <MDBTooltip arrow />

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>