Angular Bootstrap Popovers

Angular Popovers - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Here is some documentation and examples for adding Angular Bootstrap popovers, like those found in iOS, to any element on your site.

Example 

        
            
          <button type="button" mdbBtn color="primary" class="waves-light"
            mdbPopover="And here some amazing content. It's very engaging. Right?"
            placement="right"
            mdbPopoverHeader="Popover on right" mdbWavesEffect
          >
            Popover on right
          </button>

Four directions

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

        
            
          <button type="button" mdbBtn color="default" class="waves-light"
            mdbPopover="And here some amazing content. It's very engaging. Right?"
            placement="right"
            mdbPopoverHeader="Popover on right" mdbWavesEffect
          >
            Popover on right
          </button>
          <button type="button" mdbBtn color="default" class="waves-light"
            mdbPopover="And here some amazing content. It's very engaging. Right?"
            placement="bottom"
            mdbPopoverHeader="Popover on bottom" mdbWavesEffect
          >
            Popover on bottom
          </button>
          <button type="button" mdbBtn color="default" class="waves-light"
            mdbPopover="And here some amazing content. It's very engaging. Right?"
            placement="left"
            mdbPopoverHeader="Popover on left" mdbWavesEffect
          >
            Popover on left
          </button>
          <button type="button" mdbBtn color="default" class="waves-light"
            mdbPopover="And here some amazing content. It's very engaging. Right?"
            placement="top"
            mdbPopoverHeader="Popover on top" mdbWavesEffect
          >
            Popover on top
          </button>

Dismiss on next click

You may use the focus trigger to dismiss popovers on the next click that the user makes.

Dismissible popover 
        
            
          <button type="button" mdbBtn color="danger" class="waves-light"
            mdbPopover="And here some amazing content. It's very engaging. Right?"
            placement="right"
            mdbPopoverHeader="Dismissible popover"
            triggers="focus" mdbWavesEffect
          >
            Dismissible popover
          </button>

Dynamic HTML Template

Create a tag, as below, and place [mdbPopover]="popTemplate" inside your <button> tag.

        
            
          <ng-template #popTemplate>Here we go: <div [innerHtml]="html"></div></ng-template>
          <button id="popTemplate" type="button" mdbBtn color="success" mdbPopoverHeader="Dynamic html inside" [mdbPopover]="popTemplate" mdbWavesEffect>
            Show me popover with html
          </button>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'popover-example',
            templateUrl: 'popover.example.html',
          })
          export class PopoverExampleComponent {
            html = '<span class="btn btn-danger waves-light">Your HTML here</span>';
          }

Show and Hide manually

You can use the show() and hide() methods to manually trigger a popover.

This text has an attached popover 

        
            
          <span mdbPopover="Hello there! I was triggered manually" #pop="bs-mdbPopover">
            This text has an attached popover
          </span>
          <button type="button" mdbBtn color="success" class="waves-light" (click)="pop.show()" mdbWavesEffect>
            Show
          </button>
           <button type="button" mdbBtn color="warning" class="waves-light" (click)="pop.hide()" mdbWavesEffect>
            Hide
          </button>

Popover with image

This simple example shows how to place an image within an Angular Bootstrap popover. You can define wether you want to launch the popover on hover or on click.

Hover me Click me Hover me Click me 
        
            
            <ng-template #hoverImgTemp><div [innerHtml]="hoverImg"></div></ng-template>
            <a mdbBtn color="primary" placement="bottom" [mdbPopover]="hoverImgTemp" mdbWavesEffect triggers="hover">Hover me</a>
            <ng-template #clickImgTemp><div [innerHtml]="clickImg"></div></ng-template>
            <a mdbBtn color="indigo" placement="bottom" [mdbPopover]="clickImgTemp" mdbWavesEffect triggers="click">Click me</a>
            <ng-template #smallHoverImgTemp><div [innerHtml]="smallHoverImg"></div></ng-template>
            <a mdbBtn color="dark-green" placement="bottom" [mdbPopover]="smallHoverImgTemp" mdbWavesEffect triggers="hover">Hover me</a>
            <ng-template #smallClickImgTemp><div [innerHtml]="smallClickImg"></div></ng-template>
            <a mdbBtn color="purple" placement="bottom" [mdbPopover]="smallClickImgTemp" mdbWavesEffect triggers="click">Click me</a>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'popover-image',
              templateUrl: './popover-image.component.html',
              styleUrls: ['./popover-image.component.scss']
            })
            export class PopoverImageComponent {
              hoverImg: string = '<img src="https://mdbootstrap.com/img/logo/mdb192x192.webp"/>';
              clickImg: string = '<img src="https://mdbootstrap.com/img/Others/documentation/img%20(30)-mini.webp"/>';
              smallHoverImg: string = '<img src="//placehold.it/100x50"/>';
              smallClickImg: string = '<img src="//placehold.it/50x50"/>';
            }

Angular Popovers - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of popover directive.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { PopoverModule, WavesModule } from 'ng-uikit-pro-standard'
        
        
    
        
            
          import { PopoverModule, WavesModule } from 'angular-bootstrap-md'
Import example Modules list

Directives

PopoverDirective

Selector: mdbPopover

Type: PopoverDirective

Inputs

Name Type Default Description Example
container string 'body' A selector specifying the element the popover should be appended to; at the present time only supports "body". container="body"
isOpen boolean false Returns whether or not the popover is currently being shown. isOpen="true"
placement string - Placement of a popover; pick one of the accepted options: top, bottom, left, right. placement="top"
mdbPopover string - The content of your popover. mdbPopover="Popover content"
triggers string 'hover focus' Specifies the events that will be triggered. Supports a space separated list of event names. triggers="hover"
mdbPopoverHeader string - The title of your popover. mdbPopoverHeader="Nice popover"

Events

Name Type Description Example
hidden any Emits an event when the popover is hidden. (hidden)="onHidden()"
shown any Emits an event when the popover is shown. (shown)="onShown()"

Methods

Below methods are available in PopoverDirective

Name Description
show() Opens an element’s popover. This is considered a "manual" triggering of the popover.
hide() Closes an element’s popover. This is considered a "manual" triggering of the popover.
toggle(value: boolean) Toggles an element’s popover. This is considered a “manual” triggering of the popover.