Rate this docs

Vue Bootstrap Popovers

Vue Popovers - Bootstrap 4 & Material Design

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

Click the buttons below to see tooltips:



<template>
  <mdb-container>
    <mdb-popover trigger="click" :options="{placement: 'top'}">
      <div class="popover">
        <div class="popover-header">
          popover on top
        </div>
        <div class="popover-body">
          Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        </div>
      </div>
      <mdb-btn slot="reference">
        Popover on top
      </mdb-btn>
    </mdb-popover>
    <mdb-popover trigger="click" :options="{placement: 'right'}">
      <div class="popover">
        <div class="popover-header">
          popover on right
        </div>
        <div class="popover-body">
          Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        </div>
      </div>
      <mdb-btn slot="reference">
        Popover on right
      </mdb-btn>
    </mdb-popover>
    <mdb-popover trigger="click" :options="{placement: 'bottom'}">
      <div class="popover">
        <div class="popover-header">
          popover on bottom
        </div>
        <div class="popover-body">
          Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        </div>
      </div>
      <mdb-btn slot="reference">
        Popover on bottom
      </mdb-btn>
    </mdb-popover>
    <mdb-popover trigger="click" :options="{placement: 'left'}">
      <div class="popover">
        <div class="popover-header">
          popover on left
        </div>
        <div class="popover-body">
          Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        </div>
      </div>
      <mdb-btn slot="reference">
        Popover on left
      </mdb-btn>
    </mdb-popover>
  </mdb-container>
</template>


<script>
  import { mdbContainer, mdbPopover, mdbBtn } from 'mdbvue';
  
  export default {
    name: 'PopoversPage',
    components: {
      mdbContainer,
      mdbPopover,
      mdbBtn
    }
  };
</script>

        

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


import { mdbPopover } from 'mdbvue';
      

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