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


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.


Here we go:


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

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

export class PopoverExampleComponent {
    public html: string = 'Your HTML here';
}

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

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

Example:


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'

Import example Modules list