Vue Bootstrap Popovers

Vue Popovers - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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>