Material Design popovers

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

Examples

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

Add placement="top/left/bottom/right" to the <button> tag.

<button type="button" class="btn btn-danger" 
        popover="And here some amazing content. It's very engaging. Right?" 
        placement="right" 
        popoverTitle="Popover on right" ripple-radius>
  Popover on right
</button>

<button type="button" class="btn btn-danger" 
        popover="And here some amazing content. It's very engaging. Right?" 
        placement="bottom" 
        popoverTitle="Popover on bottom" ripple-radius>
  Popover on bottom
</button>

<button type="button" class="btn btn-danger" 
        popover="And here some amazing content. It's very engaging. Right?" 
        placement="left" 
        popoverTitle="Popover on left" ripple-radius>
  Popover on left
</button>

<button type="button" class="btn btn-danger" 
        popover="And here some amazing content. It's very engaging. Right?" 
        placement="top" 
        popoverTitle="Popover on top" ripple-radius>
  Popover on top
</button>
        

Options

dismissible

Add triggers="focus" to the <button> tag.

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

simple binding

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

<button type="button" class="btn btn-info" [popover]="content" [popoverTitle]="title" ripple-radius>
  Simple binding
</button>
        

Data structure:

export class AppComponent {

    public content: string = 'Add your content here';

}
        

dynamic HTML

Create <ng-template> tag, like it's shown below, and place [popover]="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" popoverTitle="Dynamic html inside" [popover]="popTemplate" ripple-radius>
  Show me popover with html
</button>
        

Data structure:

export class AppComponent {

    public html: string = '<span class="btn btn-danger">Your HTML here</span>';

}
        

preconfigured

<button type="button" class="btn btn-primary" popoverTitle="title" popover="And here some amazing content. It's very engaging. Right?" ripple-radius>
  Preconfigured popover
</button>
        

simple hover

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

<button type="button" class="btn btn-info" popover="I will hide on blur" triggers="mouseenter:mouseleave" ripple-radius>
  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 popover="Hello there! I was triggered manually" #pop="bs-popover">
  This text has attached popover
</span>
<button type="button" class="btn btn-success" (click)="pop.show()" ripple-radius>
  Show
</button>
 <button type="button" class="btn btn-warning" (click)="pop.hide()" ripple-radius>
  Hide
</button>
        

API Reference

PopoverDirective

Inputs

Example:

<button type="button" class="btn btn-primary"
    popover="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" popover="Click one more time!" ripple-radius>
  Click here!
</button>
        

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

Methods

Example:

<p>
  <span popover="I can show and hide on click."
        triggers="" #example="bs-popover">
  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>