Vue Bootstrap Popovers

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

Vue Bootstrap popover is a component which displays a box with a content after a click on an element - similar to the tooltip but can contain more content.

Examples

Basic example

Click the buttons below to see tooltips:

        
            
            <template>
              <mdb-container>
                <mdb-popover trigger="click" :options="{placement: 'top'}">
                  <span slot="header">popover on top</span>
                  <span slot="body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
                  <mdb-btn slot="reference">
                    Popover on top
                  </mdb-btn>
                </mdb-popover>
                <mdb-popover trigger="click" :options="{placement: 'right'}">
                  <span slot="header">popover on right</span>
                  <span slot="body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
                  <mdb-btn slot="reference">
                    Popover on right
                  </mdb-btn>
                </mdb-popover>
                <mdb-popover trigger="click" :options="{placement: 'bottom'}">
                  <span slot="header">popover on bottom</span>
                  <span slot="body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
                  <mdb-btn slot="reference">
                    Popover on bottom
                  </mdb-btn>
                </mdb-popover>
                <mdb-popover trigger="click" :options="{placement: 'left'}">
                  <span slot="header">popover on left</span>
                  <span slot="body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
                  <mdb-btn slot="reference">
                    Popover on left
                  </mdb-btn>
                </mdb-popover>
              </mdb-container>
            </template>
          
        
    
        
            
            <script>
              import { mdbContainer, mdbPopover, mdbBtn } from 'mdbvue';
              export default {
                name: 'PopoverExample',
                components: {
                  mdbContainer,
                  mdbPopover,
                  mdbBtn
                }
              }
            </script>

Vue Popovers - API

In this section you will find advanced information about the Popovers 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 {
        mdbPopover
      } from 'mdbvue';
    </script>

API Reference: Properties

Name Type Default Description Example
delayOnMouseOut Number 10 Setting the animation delay <mdb-popover :delayOnMouseOut="20">
disabled Boolean Disables popover <mdb-popover disabled>
options Object {placement: 'top'} Determines popover options <mdb-popover :options="{placement: 'top'}">
trigger String 'click' Determines start event. <mdb-popover trigger="click">
maxWidth Number 276 Sets maximum width of the popover <mdb-popover :maxWidth="90">

API Reference: slots

Name Description Example
reference This is a target, upon / beside / below of which our hero will emerge <mdb-btn slot="reference"> Click me, baby </mdb-btn>
header Gets inserted into a div.popover-header <span slot="header"> hats go on heads </span>
body Helps to build popover's body <span slot="body"> shake that lower body part </span>

Image popover

An example of having a picture instead of text inside the popover body.

Hover over me Click me Hover over me Click me 
        
            
        <template>
          <mdb-container>
            <mdb-popover trigger="hover" :options="{placement: 'bottom'}">
              <img src="https://mdbootstrap.com/img/logo/mdb192x192.webp" slot="body" />
              <mdb-btn slot="reference" color="primary">
                Hover over me
              </mdb-btn>
            </mdb-popover>
            <mdb-popover trigger="click" :options="{placement: 'bottom'}">
              <img src="https://mdbootstrap.com/img/Others/documentation/img%20(30)-mini.webp" slot="body" />
              <mdb-btn slot="reference" color="indigo">
                Click me
              </mdb-btn>
            </mdb-popover>
            <mdb-popover trigger="hover" :options="{placement: 'bottom'}">
              <img src="//placehold.it/100x50" slot="body" />
              <mdb-btn slot="reference" color="dark-green">
                Hover over me
              </mdb-btn>
            </mdb-popover>
            <mdb-popover trigger="click" :options="{placement: 'bottom'}">
              <img src="//placehold.it/100x50g" slot="body" />
              <mdb-btn slot="reference" color="purple">
                Click me
              </mdb-btn>
            </mdb-popover>
          </mdb-container>
        </template>
        
        
    
        
            
            <script>
              import {
                mdbContainer,
                mdbPopover,
                mdbBtn
              } from 'mdbvue';
              export default {
                name: 'ImagePopoverExample',
                components: {
                  mdbContainer,
                  mdbPopover,
                  mdbBtn
                }
              }
            </script>