Vue Bootstrap Tooltips

Vue Tooltips - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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:

Default 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. 
        
            
          <template>
            <p>
              Tight pants next level keffiyeh
              <mdb-tooltip trigger="hover" :options="{placement: 'top'}">
                <span slot="tip"> Default tooltip </span>
                <a slot="reference">you probably</a>
              </mdb-tooltip>
              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
              <mdb-tooltip trigger="hover" :options="{placement: 'top'}">
                <span slot="tip">Another tooltip</span>
                <a slot="reference">have a</a>
              </mdb-tooltip>
              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
              <mdb-tooltip trigger="hover" :options="{placement: 'top'}">
                <span slot="tip">Another onr here too</span>
                <a slot="reference">whatever keytar</a>
              </mdb-tooltip>
              ,scenester farm-to-table banksy Austin
              <mdb-tooltip trigger="hover" :options="{placement: 'top'}">
                <span slot="tip">The last tip!</span>
                <a slot="reference">twitter handle</a>
              </mdb-tooltip>
              freegan cred raw denim single-origin coffee viral.
            </p>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTooltip
            } from 'mdbvue';
            export default {
              components: {
                mdbTooltip
              }
            }
          </script>

Material tooltips MDB Pro component

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. 
        
            
            <template>
              <p>
                Tight pants next level keffiyeh
                <mdb-tooltip material trigger="hover" :options="{placement: 'top'}">
                  <span slot="tip"> Default tooltip </span>
                  <a slot="reference">you probably</a>
                </mdb-tooltip>
                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
                <mdb-tooltip material trigger="hover" :options="{placement: 'top'}">
                  <span slot="tip">Another tooltip</span>
                  <a slot="reference">have a</a>
                </mdb-tooltip>
                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
                <mdb-tooltip material trigger="hover" :options="{placement: 'top'}">
                  <span slot="tip">Another onr here too</span>
                  <a slot="reference">whatever keytar</a>
                </mdb-tooltip>
                ,scenester farm-to-table banksy Austin
                <mdb-tooltip material trigger="hover" :options="{placement: 'top'}">
                  <span slot="tip">The last tip!</span>
                  <a slot="reference">twitter handle</a>
                </mdb-tooltip>
                freegan cred raw denim single-origin coffee viral.
              </p>
            </template>
            
        
    
        
            
            <script>
              import {
                mdbTooltip
              } from 'mdbvue';
              export default {
                components: {
                  mdbTooltip
                }
              }
            </script>

Four tooltips

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

Default tooltips 

        
            
          <template>
            <mdb-tooltip trigger="hover" :options="{placement: 'top'}">
              <span slot="tip">Tooltip</span>
              <mdb-btn slot="reference" color="primary">Tooltip on top</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip trigger="hover" :options="{placement: 'right'}">
              <span slot="tip">Tooltip</span>
              <mdb-btn slot="reference" color="primary">Tooltip on right</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip trigger="hover" :options="{placement: 'bottom'}">
              <span slot="tip">Tooltip</span>
              <mdb-btn slot="reference" color="primary">Tooltip on bottom</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip trigger="hover" :options="{placement: 'left'}">
              <span slot="tip">Tooltip</span>
              <mdb-btn slot="reference" color="primary">Tooltip on left</mdb-btn>
            </mdb-tooltip>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTooltip
            } from 'mdbvue';
            export default {
              components: {
                mdbTooltip
              }
            }
          </script>

Material tooltips MDB Pro component 

        
            
            <template>
              <mdb-container>
                <mdb-tooltip material trigger="hover" :options="{placement: 'top'}">
                  <span slot="tip">Tooltip</span>
                  <mdb-btn slot="reference" color="secondary">Tooltip on top</mdb-btn>
                </mdb-tooltip>
                <mdb-tooltip material trigger="hover" :options="{placement: 'right'}">
                  <span slot="tip">Tooltip</span>
                  <mdb-btn slot="reference" color="secondary">Tooltip on right</mdb-btn>
                </mdb-tooltip>
                <mdb-tooltip material trigger="hover" :options="{placement: 'bottom'}">
                  <span slot="tip">Tooltip</span>
                  <mdb-btn slot="reference" color="secondary">Tooltip on bottom</mdb-btn>
                </mdb-tooltip>
                <mdb-tooltip material trigger="hover" :options="{placement: 'left'}">
                  <span slot="tip">Tooltip</span>
                  <mdb-btn slot="reference" color="secondary">Tooltip on left</mdb-btn>
                </mdb-tooltip>
              </mdb-container>
            </template>
            
        
    
        
            
            <script>
              import {
                mdbTooltip,
                mdbContainer
              } from 'mdbvue';
              export default {
                components: {
                  mdbTooltip,
                  mdbContainer
                }
              }
            </script>

Custom HTML

You can use HTML to customize tooltip's title.

Default tooltip 

        
            
          <template>
            <mdb-tooltip trigger="hover" :options="{placement: 'left'}">
              <span slot="tip"><em>Tooltip</em> <u>with</u> <b>HTML</b></span>
              <mdb-btn slot="reference" color="primary">Tooltip with HTML</mdb-btn>
            </mdb-tooltip>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTooltip
            } from 'mdbvue';
            export default {
              components: {
                mdbTooltip
              }
            }
          </script>

Material tooltip MDB Pro component 

        
            
            <template>
              <mdb-tooltip material trigger="hover" :options="{placement: 'left'}">
                <span slot="tip"><em>Tooltip</em> <u>with</u> <b>HTML</b></span>
                <mdb-btn slot="reference" color="secondary">Tooltip with HTML</mdb-btn>
              </mdb-tooltip>
            </template>
            
        
    
        
            
            <script>
              import {
                mdbTooltip
              } from 'mdbvue';
              export default {
                components: {
                  mdbTooltip
                }
              }
            </script>

Material Email Tooltips MDB Pro component 

        
            
        <template>
          <mdb-container>
            <mdb-tooltip material email trigger="hover" :options="{placement: 'top'}">
              <span slot="tip">MD</span>
              <mdb-btn slot="reference" color="secondary">MD on top</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip material email trigger="hover" :options="{placement: 'right'}">
              <span slot="tip">MD</span>
              <mdb-btn slot="reference" color="secondary">MD on right</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip material email trigger="hover" :options="{placement: 'bottom'}">
              <span slot="tip">MD</span>
              <mdb-btn slot="reference" color="secondary">MD on bottom</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip material email trigger="hover" :options="{placement: 'left'}">
              <span slot="tip">MD</span>
              <mdb-btn slot="reference" color="secondary">MD on left</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip material email trigger="hover" :options="{placement: 'left'}">
              <span slot="tip"><em>Tooltip</em> <u>with</u> <b>HTML</b></span>
              <mdb-btn slot="reference" color="secondary">MD with HTML</mdb-btn>
            </mdb-tooltip>
          </mdb-container>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbTooltip,
            mdbContainer
          } from 'mdbvue';
          export default {
            components: {
              mdbTooltip,
              mdbContainer
            }
          }
        </script>

Material Smaller Tooltips MDB Pro component 

        
            
        <template>
          <mdb-container>
            <mdb-tooltip material sm trigger="hover" :options="{placement: 'top'}">
              <span slot="tip">MD</span>
              <mdb-btn slot="reference" color="secondary">MD on top</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip material sm trigger="hover" :options="{placement: 'right'}">
              <span slot="tip">MD</span>
              <mdb-btn slot="reference" color="secondary">MD on right</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip material sm trigger="hover" :options="{placement: 'bottom'}">
              <span slot="tip">MD</span>
              <mdb-btn slot="reference" color="secondary">MD on bottom</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip material sm trigger="hover" :options="{placement: 'left'}">
              <span slot="tip">MD</span>
              <mdb-btn slot="reference" color="secondary">MD on left</mdb-btn>
            </mdb-tooltip>
            <mdb-tooltip material sm trigger="hover" :options="{placement: 'left'}">
              <span slot="tip"><em>Tooltip</em> <u>with</u> <b>HTML</b></span>
              <mdb-btn slot="reference" color="secondary">MD with HTML</mdb-btn>
            </mdb-tooltip>
          </mdb-container>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbTooltip,
            mdbContainer
          } from 'mdbvue';
          export default {
            components: {
              mdbTooltip,
              mdbContainer
            }
          }
        </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

        
            
    <script>
      import {
        mdbTooltip
      } from 'mdbvue';
    </script>

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. For example placement> may take in top>, bottom>, right> and left>. <mdb-tooltip :options="{placement: 'top'}">>
trigger> String 'hover'> Determines start event, either click> or the default hover> <mdb-tooltip trigger="hover">>
material> Boolean false> Applies material design styles to a tooltip <tooltip material >>
email> Boolean false> Applies email styles to a material tooltip <tooltip material email >>
sm> Boolean false> Changes size of a material tooltip to small <tooltip material sm >>
maxWidth> Number 276> Sets maximum width of the tooltip <mdb-tooltip :maxWidth="90">>
boundriesSelector> String > Sets bounriesElement value in the preventOverflow modifier (Popper.js) <mdb-tooltip :boundrySelector="#test">>
forceShow> Boolean false> Allows to show tooltip without triggering event <mdb-tooltip :boundrySelector="#test">>
appendToBody> Boolean false> Append the tooltip to the end of the body element <mdb-tooltip append-to-body>>
visibleArrow> Boolean true> Shows the arrow <mdb-tooltip :visible-arrow="false">>

- property available only for PRO users.

API Reference: Slots

Name Description Example
tip> Slotted content will be wrapped in a div.tooltip> and used as such <span slot="tip">Don't forget your tip, bro!</span>>
reference> Tooltip triggering action target <mdb-btn color="primary" slot="reference">hover over me, baby - I want to show you something</mdb-btn>>
[default]> The old syntax - if you place something within mdb-tooltip> without specifying slots, it will be used similarly to the tip slot>, yet the content shall still require wrapping in a div.tooltip>. <mdb-tooltip><div class="tooltip">this is a tooltip</div><mdb-btn slot="reference">I do trigger</mdb-btn></mdb-tooltip>>