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:

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


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. 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">

- 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>