Popovers

Vue Bootstrap 5 Popover component

Documentation and examples for adding popovers, like those found in iOS, to any element on your site.

Note: Read the API tab to find all available options and advanced customization

Basic example

        
            
            <template>
              <MDBPopover v-model="popover1">
                <template #reference>
                  <MDBBtn color="danger" size="lg" @click="popover1 = !popover1">Click to toggle popover</MDBBtn>
                </template>
                <template #header>Popover header</template>
                <template #body>
                  And here's some amazing content. It's very engaging.
                  Right?
                </template>
              </MDBPopover>
            </template>
          
        
    
        
            
            <script>
              import { MDBPopover, MDBBtn} from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBPopover,
                  MDBBtn
                },
                setup() {
                  const popover1 = ref(false);
                  return {
                    popover1
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPopover, MDBBtn} from "mdb-vue-ui-kit";
              import { ref } from 'vue';

              const popover1 = ref(false);
            </script>

Overview

Things to know when using the popovers:

  • Zero-length header and body slots values will never show a popover.
  • Triggering popovers on hidden elements will not work.
  • Popovers for .disabled or disabled elements must be triggered on a wrapper element.
  • When referenced from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width. Use .text-nowrap on your #reference slot content to avoid this behavior.
  • Popovers must be hidden before their corresponding elements have been removed from the DOM.
  • Popovers can be triggered thanks to an element inside a shadow DOM.

Four directions

Four options are available: top, right, bottom, and left aligned for direction property. 

        
            
            <template>
              <MDBPopover v-model="popover2" direction="top">
                <template #reference>
                  <MDBBtn color="secondary" @click="popover2 = !popover2">
                    Popover on top
                  </MDBBtn>
                </template>
                <template #body>
                  Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
                </template>
              </MDBPopover>
              <MDBPopover v-model="popover3" direction="right">
                <template #reference>
                  <MDBBtn color="secondary" @click="popover3 = !popover3">
                    Popover on right
                  </MDBBtn>
                </template>
                <template #body>
                  Vivamus sagittis lacus vel augue laoreet rutrum
                  faucibus.
                </template>
              </MDBPopover>
              <MDBPopover v-model="popover4">
                <template #reference>
                  <MDBBtn color="secondary" @click="popover4 = !popover4">
                    Popover on bottom
                  </MDBBtn>
                </template>
                <template #body>
                  Vivamus sagittis lacus vel augue laoreet rutrum
                  faucibus.
                </template>
              </MDBPopover>
              <MDBPopover v-model="popover5" direction="left">
                <template #reference>
                  <MDBBtn color="secondary" @click="popover5 = !popover5">
                    Popover on left
                  </MDBBtn>
                </template>
                <template #body>
                  Vivamus sagittis lacus vel augue laoreet rutrum
                  faucibus.
                </template>
              </MDBPopover>
            </template>
          
        
    
        
            
            <script>
              import { MDBPopover, MDBBtn} from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBPopover,
                  MDBBtn
                },
                setup() {
                  const popover2 = ref(false);
                  const popover3 = ref(false);
                  const popover4 = ref(false);
                  const popover5 = ref(false);
                  return {
                    popover2,
                    popover3,
                    popover4,
                    popover5,
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPopover, MDBBtn} from "mdb-vue-ui-kit";
              import { ref } from 'vue';

              const popover2 = ref(false);
              const popover3 = ref(false);
              const popover4 = ref(false);
              const popover5 = ref(false);
            </script>

Dismiss on next click

Use the dismissible property to dismiss popovers on the user’s next click of a different element than the toggle element.

Specific markup required for dismiss-on-next-click:
For proper cross-browser and cross-platform behavior, you must use the anchor element, not the button element, and you also must include a tabindex attribute.

Dismissible popover 
        
            
            <template>
              <MDBPopover v-model="popover6" dismissible>
                <template #reference>
                  <a
                    class="btn btn-secondary"
                    tabindex="0"
                    @click="popover6 = !popover6"
                    >Dismissible popover</a
                  >
                </template>
                <template #header>Dismissible popover</template>
                <template #body>
                  And here's some amazing content. It's very engaging.
                  Right?
                </template>
              </MDBPopover>
            </template>
          
        
    
        
            
            <script>
              import { MDBPopover } from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBPopover
                },
                setup() {
                  const popover6 = ref(false);
                  return {
                    popover6
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPopover } from "mdb-vue-ui-kit";
              import { ref } from 'vue';

              const popover6 = ref(false);
            </script>

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <div> or <span> and override the pointer-events on the disabled element.

For disabled popover triggers, you may also prefer to use hover property so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element. 

        
            
            <template>
              <MDBPopover v-model="popover7">
                <template #reference>
                  <span @click="popover7 = !popover7">
                    <MDBBtn color="secondary" disabled>Disabled button</MDBBtn>
                  </span>
                </template>
                <template #body>Disabled popover</template>
              </MDBPopover>
            </template>
          
        
    
        
            
            <script>
              import { MDBPopover, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from 'vue';
              export default {
                components: {
                  MDBPopover,
                  MDBBtn
                },
                setup() {
                  const popover7 = ref(false);
                  return {
                    popover7
                  }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPopover, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from 'vue';

              const popover7 = ref(false);
            </script>

Popovers - API

Import

        
            
          <script>
            import {
              MDBPopover
            } from 'mdb-vue-ui-kit';
          </script>

Properties

Property Type Default Description
boundary String 'clippingParents' Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement selector. For more information refer to Popper's detectOverflow docs.
tag String "span" Defines tag element wrapping reference slot.
reference String Sets custom selector for reference element instead of slot
popover String Sets custom selector for popover content instead of #header and #body slots
options Object {} Allows to change the default Popper config, see Popper's configuration.
offset String Offset of the popover relative to its target.
direction String "top" Position the tooltip relative to its target - top | bottom | left | right.
maxWidth Number 276 Sets max width of the popover element
arrow Boolean false Adds an arrow to a popver element
dismissible Boolean false Allows to close popover on click outside its content
hover Boolean false Allows to open popover on mouseover event

Slots

Name Description Example
reference Popover triggering action target <template #reference><MDBBtn color="danger" size="lg" @click="popover = !popover">Click to toggle popover</MDBBtn></template>
header Slotted content will be wrapped in a div.popover-header and used as such <template #header>Hi! I'm popover header</template>
body Slotted content will be wrapped in a div.popover-heabodyder and used as such <template #body>Hi! I'm popover body</template>
[default] If you place something within MDBPopover without specifying slots, it will be used similarly to the as popover content, yet the content shall still require wrapping in a div.poover-body. <MDBPopover><div class="poover-body"> This is a content</div></MDBPopover>

CSS variables

As part of MDB’s evolving CSS variables approach, popover now use local CSS variables on .popover for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

        
            
        // .popover
        --#{$prefix}popover-zindex: #{$zindex-popover};
        --#{$prefix}popover-max-width: #{$popover-max-width};
        @include rfs($popover-font-size, --#{$prefix}popover-font-size);
        --#{$prefix}popover-bg: #{$popover-bg};
        --#{$prefix}popover-border-width: #{$popover-border-width};
        --#{$prefix}popover-border-color: #{$popover-border-color};
        --#{$prefix}popover-border-radius: #{$popover-border-radius};
        --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
        --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
        --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
        --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
        @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
        --#{$prefix}popover-header-color: #{$popover-header-color};
        --#{$prefix}popover-header-bg: #{$popover-header-bg};
        --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
        --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
        --#{$prefix}popover-body-color: #{$popover-body-color};
        --#{$prefix}popover-border-bottom-width: #{$popover-border-bottom-width};

SCSS variables

        
            
        $popover-font-size: $font-size-sm;
        $popover-bg: $white;
        $popover-max-width: 276px;
        $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);

        $popover-header-font-size: $font-size-base;
        $popover-header-color: $headings-color;
        $popover-header-padding-y: 0.5rem;
        $popover-header-padding-x: $spacer;

        $popover-body-color: $body-color;
        $popover-body-padding-y: $spacer;
        $popover-body-padding-x: $spacer;

        $popover-box-shadow: $box-shadow-2;
        $popover-border-radius: $border-radius-lg;
        $popover-border-bottom-width: $border-width-alternate;
        $popover-border-width: 1px;
        $popover-border-color: hsl(0, 0%, 96%);
        $popover-header-bg: $white;