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>
        

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>
        

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>
        

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>
        

Popovers - API


Import


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

Properties

Property Type Default Description Example
tag String "span" Defines tag element wrapping reference slot. <MDBPopover tag="div" />
reference String Sets custom selector for reference element instead of slot <MDBPopover reference="#reference-element" />
popover String Sets custom selector for popover content instead of #header and #body slots <MDBPopover popover="#poopver-element" />
options Object {} Allows to change the default Popper config, see Popper's configuration. <MDBPopover options={{ modifiers: [{ name: 'offset', options: { offset: [10, 20] }}]}} />
offset String Offset of the popover relative to its target. <MDBPopover offset="0, 10" />
direction String "top" Position the tooltip relative to its target - top | bottom | left | right. <MDBPopover direction="bottom" />
maxWidth Number 276 Sets max width of the popover element <MDBPopover :maxWidth="300" />
arrow Boolean false Adds an arrow to a popver element <MDBPopover arrow />
dismissible Boolean false Allows to close popover on click outside its content <MDBPopover dismissible />
hover Boolean false Allows to open popover on mouseover event <MDBPopover hover />

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>