Sign in


Sign up


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.

Dismissible popover

<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

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

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