Popovers

Angular Bootstrap 5 Popovers 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

Popovers are overlays that open on demand and are mainly used on elements to display more content on floating cards, triggered by clicking or hovering.

        
            
            <button
              type="button"
              class="btn btn-lg btn-danger"
              mdbPopover="And here's some amazing content. It's very engaging. Right?"
              mdbPopoverTitle="Popover title"
            >
              Click to toggle popover
            </button>

Overview

Things to know when using the popovers:

  • Popovers are opt-in for performance reasons, so you must initialize them yourself.
  • Zero-length mdbPopoverTitle and mdbPopover 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.
  • 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.

        
            
            <button
              type="button"
              class="btn btn-secondary me-2"
              placement="top"
              mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            >
              Popover on top
            </button>
            <button
              type="button"
              class="btn btn-secondary me-2"
              placement="right"
              mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            >
              Popover on right
            </button>
            <button
              type="button"
              class="btn btn-secondary me-2"
              placement="bottom"
              mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            >
              Popover on bottom
            </button>
            <button
              type="button"
              class="btn btn-secondary"
              placement="left"
              mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            >
              Popover on left
            </button>

Dismiss on next click

Use the focus trigger 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 <a> tag, not the <button> tag, and you also must include a tabindex attribute.

Dismissible popover 
        
            
            <a
              tabindex="0"
              class="btn btn-lg btn-danger"
              role="button"
              trigger="focus"
              mdbPopoverTitle="Dismissible popover"
              mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
              >Dismissible popover</a
            >

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 data-mdb-trigger="hover" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element. 

        
            
            <span class="d-inline-block" mdbPopover="Disabled popover">
              <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>
                Disabled button
              </button>
            </span>

Custom template

Use ng-template reference as a value for [mdbPopover] input to display custom template. 

        
            
            <button
              type="button"
              class="btn btn-lg btn-danger"
              [mdbPopover]="template"
              mdbPopoverHeader="Popover title"
            >
              Click to toggle popover
            </button>
            <ng-template #template>Popover template</ng-template>

Popovers - API

Import

        
            
          import { MdbPopoverModule } from 'mdb-angular-ui-kit/popover';
          …
          @NgModule ({
            ...
            imports: [MdbPopoverModule],
            ...
          })

Inputs

Name Type Default Description
animation Boolean true Apply a fade transition to the popover
mdbPopover String '' Default content value if mdbPopover input isn't present.
mdbPopoverTitle String '' Default title value if mdbPopoverTitle input isn't present.
delayShow Number 0 Delay showing the popover (ms)
delayHide Number 0 Delay hiding the popover (ms)
placement String 'top' How to position the popover - top | bottom | left | right
trigger String 'click' How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
offset Number 0 Offset of the popover relative to its target

Outputs

Name Description
popoverShow Fires when show animation starts.
popoverShown Fires when show animation ends.
popoverHide Fires when hide animation starts.
popoverHidden Fires when hide animation ends.

Methods

Name Description Example
hide Manually closes a popover popover.hide()
show Manually opens a popover popover.show()
toggle Manually toggle a popover popover.toggle() 
        
            
              <button
                type="button"
                class="btn btn-lg btn-danger"
                mdbPopover="And here's some amazing content. It's very engaging. Right?"
                mdbPopoverTitle="Popover title"
                #popover="mdbPopover"
              >
                Click to toggle popover
              </button>
            
        
    
        
            
              import { AfterViewInit, Component, ViewChild } from '@angular/core';
              import { MdbPopoverDirective } from 'mdb-angular-ui-kit/popover';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss']
              })
              export class AppComponent implements AfterViewInit {
                @ViewChild('popover') popover!: MdbPopoverDirective;

                ngAfterViewInit(): void {
                  this.popover.show();
                }
              }