Rate these 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>
                <span slot="tip">Tooltip on top</span>
                <mdb-btn slot="reference" color="primary">
                  Tooltip on top
                </mdb-btn>
              </mdb-tooltip>

              <mdb-tooltip :options="{placement: 'right'}">
                <span slot="tip">Tooltip on right</span>
                <mdb-btn slot="reference" color="primary">
                  Tooltip on right
                </mdb-btn>
              </mdb-tooltip>

              <mdb-tooltip :options="{placement: 'bottom'}">
                <span slot="tip">Tooltip on bottom</span>
                <mdb-btn slot="reference" color="primary">
                  Tooltip on bottom
                </mdb-btn>
              </mdb-tooltip>

              <mdb-tooltip :options="{placement: 'left'}">
                <span slot="tip">Tooltip on left</span>
                <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: 'TooltipExample',
              components: {
                mdbContainer,
                mdbTooltip,
                mdbBtn
              }
            }
          </script>
        

Note: We can help you build your project.
learn more

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

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>