Angular Bootstrap popovers

Add small overlay content, like those found in iOS, to any element for housing secondary information.


Examples


<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>
    

Usage

Simple binding

Add [mdbPopover]="content" inside your <button>.


<button type="button" class="btn btn-info waves-light" [mdbPopover]="content" [mdbPopoverHeader]="title" mdbWavesEffect>
  Simple binding
</button>
	

import { Component } from '@angular/core';

@Component({
  selector: 'popover-example',
  templateUrl: 'popover.example.html',
})

export class PopoverExampleComponent {
    public content: string = 'Add your content here';
}
  

dynamic HTML

Create <ng-template> 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>';
}
  

Preconfigured


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

Simple hover

Add triggers="mouseenter:mouseleave" to the <button> tag.


<button type="button" mdbBtn color="info" class="waves-light" mdbPopover="I will hide on blur" triggers="mouseenter:mouseleave" mdbWavesEffect>
  Hover over me!
</button>
        

Show and Hide

Create your own element with popover inside and add (click)="pop.show() and (click)="pop.hide()" to your buttons.


<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>
        

API Options

PopoverDirective

Selector [mdbPopover]
Exported as bs-mdbPopover

Inputs

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

Example:


<button type="button" mdbBtn color="primary"
    mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
    mdbPopoverHeader="Popover on hover"
    triggers="hover">
   Popover example
</button>
        

Outputs

(hidden)="onHidden()" Emits an event when the popover is hidden.
(shown)="onShown()" Emits an event when the popover is shown.

Example:


<button (shown)="onShown()" (hidden)="onHidden()" type="button" class="btn btn-info waves-light" mdbPopover="Click one more time!" mdbWavesEffect>
  Click here!
</button>
	

import { Component } from '@angular/core';

@Component({
  selector: 'popover-example',
  templateUrl: 'popover.example.html',
})

export class PopoverExampleComponent {
    public onShown(): void {
        console.log('can be seen')
    }
    public onHidden(): void {
        console.log("can not be seen")
    }
}
  

Methods

(event)="name.show()" Return type: void
Opens an element’s popover. This is considered a "manual" triggering of the popover.
(event)="name.hide()" Return type: void
Closes an element’s popover. This is considered a "manual" triggering of the popover.
(event)="name.toggle(value: boolean)()" Return type: void
Toggles an element’s popover. This is considered a "manual" triggering of the popover.

Example:


<p>
  <span mdbPopover="I can show and hide on click."
        triggers="" #example="bs-mdbPopover">
  Text with attached popover
  </span>
</p>

<button type="button" mdbBtn color="primary" (click)="example.show()">
  Show
</button>
<button type="button" mdbBtn color="warning" (click)="example.hide()">
  Hide
</button>
        

API Reference:

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.

API Reference for MDB Angular Popovers:
// For MDB Angular Pro
import { PopoverModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { PopoverModule, WavesModule } from 'angular-bootstrap-md'