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" mdbWavesEffect>
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" mdbWavesEffect>
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" mdbWavesEffect>
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" mdbWavesEffect>
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" mdbWavesEffect>
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" 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" popoverTitle="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" class="btn btn-primary waves-light" popoverTitle="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" class="btn btn-info 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" class="btn btn-success waves-light" (click)="pop.show()" mdbWavesEffect>
Show
</button>
<button type="button" class="btn btn-warning waves-light" (click)="pop.hide()" mdbWavesEffect>
Hide
</button>
API Reference
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. |
popoverTitle
|
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" class="btn btn-primary"
mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
popoverTitle="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:
<button (onShown)="onShown()" (onHidden)="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" class="btn btn-primary" (click)="example.show()">
Show
</button>
<button type="button" class="btn btn-warning" (click)="example.hide()">
Hide
</button>