Rate this docs

Vue Bootstrap Tooltips

Vue Tooltips - Bootstrap 4 & Material Design

Tooltips are a convenient way of presenting additional information to your user. They are tiny little clouds with a brief text message, triggered by clicking on specified element or hovering over it.

They significantly increase User Experience, especially with advanced UI elements, which often require additional explanation.


Examples

Hover over the links below to see tooltips:



<template>
  <mdb-container>
    <mdb-tooltip :options="{placement: 'top'}">
      <div class="tooltip">
        Tooltip on top
      </div>
      <mdb-btn slot="reference" color="primary">
        Tooltip on top
      </mdb-btn>
    </mdb-tooltip>
    <mdb-tooltip :options="{placement: 'right'}">
      <div class="tooltip">
        Tooltip on right
      </div>
      <mdb-btn slot="reference" color="primary">
        Tooltip on right
      </mdb-btn>
    </mdb-tooltip>
    <mdb-tooltip :options="{placement: 'bottom'}">
      <div class="tooltip">
        Tooltip on bottom
      </div>
      <mdb-btn slot="reference" color="primary">
        Tooltip on bottom
      </mdb-btn>
    </mdb-tooltip>
    <mdb-tooltip :options="{placement: 'left'}">
      <div class="tooltip">
        Tooltip on left
      </div>
      <mdb-btn slot="reference" color="primary">
        Tooltip on left
      </mdb-btn>
    </mdb-tooltip>
  </mdb-container>
</template>


<script>
  import { mdbContainer, mdbTooltip, mdbBtn } from 'mdbvue';
  
  export default {
    name: 'TooltipsPage',
    components: {
      mdbContainer,
      mdbTooltip,
      mdbBtn
    }
  };
</script>

        

Tooltips - API

In this section you will find advanced information about the Tooltips component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


import { mdbTooltip } from 'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
delayOnMouseOut Number 10 Setting the animation delay <mdb-tooltip :delayOnMouseOut="20">
disabled Boolean Disables tooltip <mdb-tooltip disabled>
options Object {placement: 'top'} Determines tooltip options <mdb-tooltip :options="{placement: 'top'}">
trigger String 'hover' Determines start event. <mdb-tooltip trigger="hover">