Angular Bootstrap popovers

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

Examples

<button type="button" class="btn btn-default waves-light" 
        mdbPopover="And here some amazing content. It's very engaging. Right?" 
        placement="right" 
        popoverTitle="Popover on right" mdbRippleRadius>
  Popover on right
</button>

<button type="button" class="btn btn-default waves-light" 
        mdbPopover="And here some amazing content. It's very engaging. Right?" 
        placement="bottom" 
        popoverTitle="Popover on bottom" mdbRippleRadius>
  Popover on bottom
</button>

<button type="button" class="btn btn-default waves-light" 
        mdbPopover="And here some amazing content. It's very engaging. Right?" 
        placement="left" 
        popoverTitle="Popover on left" mdbRippleRadius>
  Popover on left
</button>

<button type="button" class="btn btn-default waves-light" 
        mdbPopover="And here some amazing content. It's very engaging. Right?" 
        placement="top" 
        popoverTitle="Popover on top" mdbRippleRadius>
  Popover on top
</button>
        

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.

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

Usage

Simple binding

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

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

Data structure:

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" popoverTitle="Dynamic html inside" [mdbPopover]="popTemplate" mdbRippleRadius>
  Show me popover with html
</button>
        

Data structure:

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" class="btn btn-primary waves-light" popoverTitle="title" mdbPopover="And here some amazing content. It's very engaging. Right?" mdbRippleRadius>
  Preconfigured popover
</button>
        

Simple hover

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

<button type="button" class="btn btn-info waves-light" mdbPopover="I will hide on blur" triggers="mouseenter:mouseleave" mdbRippleRadius>
  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" class="btn btn-success waves-light" (click)="pop.show()" mdbRippleRadius>
  Show
</button>
 <button type="button" class="btn btn-warning waves-light" (click)="pop.hide()" mdbRippleRadius>
  Hide
</button>
        

API Reference

PopoverDirective

Inputs

Example:

<button type="button" class="btn btn-primary"
    mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
    popoverTitle="Popover on hover"
    triggers="hover">
   Popover example
</button>
        

Outputs

Example:

<button (onShown)="onShown()" (onHidden)="onHidden()" type="button" class="btn btn-info waves-light" mdbPopover="Click one more time!" mdbRippleRadius>
  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

Example:

<p>
  <span mdbPopover="I can show and hide on click."
        triggers="" #example="bs-mdbPopover">
  Text with attached popover
  </span>
</p>
 
<button type="button" class="btn btn-primary" (click)="example.show()">
  Show
</button>
<button type="button" class="btn btn-warning" (click)="example.hide()">
  Hide
</button>