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.

        
            
            <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. You can inlcude context data with [mdbPopoverData] input.

        
            
          <button
          type="button"
          class="btn btn-lg btn-danger"
          [mdbPopover]="template"
          mdbPopoverTitle="Popover custom template"
          [mdbPopoverData]="{ person: { name: 'John', surname: 'Doe' } }"
        >
          Click to toggle popover
        </button>
        <ng-template #template let-person="person">Current user: {{ person.name }} {{ person.surname }}</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
delayHide number 0 Delay hiding the popover (ms)
delayShow number 0 Delay showing the popover (ms)
mdbPopover string '' Default content value if mdbPopover input isn't present
mdbPopoverData any - Defines data for template context
mdbPopoverTitle string '' Default title value if mdbPopoverTitle input isn't present
offset number 4 Offset of the popover relative to its target
placement MdbPopoverPosition 'top' How to position the popover - top | bottom | left | right
popoverDisabled boolean false Disables the display of the popover
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

Outputs

Name Type Description
popoverShow EventEmitter<MdbPopoverDirective> Fires when show animation starts.
popoverShown EventEmitter<MdbPopoverDirective> Fires when show animation ends.
popoverHide EventEmitter<MdbPopoverDirective> Fires when hide animation starts.
popoverHidden EventEmitter<MdbPopoverDirective> Fires when hide animation ends.
        
            
            <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"
            (popoverShow)="onPopoverShow($event)"
          >
            Click to toggle popover
          </button>                         
            
        
    
        
            
            import { Component } 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 {
              onPopoverShow(event: MdbPopoverDirective): void {
                console.log('popover show: ', event);
              }
            }                             
            
        
    

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();
                }
              }
            
        
    

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;