Angular Bootstrap Popovers

Angular popovers - Bootstrap 4 & Material Design

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

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 tag, like it's shown 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" class="btn btn-success waves-light" 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 {
            public html: string = '<span class="btn btn-danger">Your HTML here</span>';
        }

Show and Hide manually

Use the show() and hide() methods to manually trigger popover.

This text has attached popover 



        <span mdbPopover="Hello there! I was triggered manually" #pop="bs-mdbPopover">
          This text has 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 a Angular Bootstrap popover. You can define if 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 {
            public hoverImg: string = '<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg"/>';
            public clickImg: string = '<img src="https://mdbootstrap.com/img/Others/documentation/img%20(30)-mini.jpg"/>';
            public smallHoverImg: string = '<img src="//placehold.it/100x50"/>';
            public 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. 

// For MDB Angular Pro
  import { PopoverModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
  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.