Popovers
Angular Bootstrap 5 Popovers component
Documentation and examples for adding popovers, like those found in iOS, to any element on your site.
Note: Read the API tab to find all available options and advanced customization
Basic example
<button
type="button"
class="btn btn-lg btn-danger"
mdbPopover="And here's some amazing content. It's very engaging. Right?"
mdbPopoverTitle="Popover title"
>
Click to toggle popover
</button>
Overview
Things to know when using the popovers:
- Popovers are opt-in for performance reasons, so you must initialize them yourself.
-
Zero-length
mdbPopoverTitle
andmdbPopover
values will never show a popover. - Triggering popovers on hidden elements will not work.
-
Popovers for
.disabled
ordisabled
elements must be triggered on a wrapper element. - Popovers must be hidden before their corresponding elements have been removed from the DOM.
- Popovers can be triggered thanks to an element inside a shadow DOM.
Four directions
Four options are available: top, right, bottom, and left aligned.
<button
type="button"
class="btn btn-secondary me-2"
placement="top"
mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
Popover on top
</button>
<button
type="button"
class="btn btn-secondary me-2"
placement="right"
mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
Popover on right
</button>
<button
type="button"
class="btn btn-secondary me-2"
placement="bottom"
mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
Popover on bottom
</button>
<button
type="button"
class="btn btn-secondary"
placement="left"
mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
Popover on left
</button>
Dismiss on next click
Use the focus
trigger to dismiss popovers on the user’s next click of a
different element than the toggle element.
Specific markup required for dismiss-on-next-click:
For proper cross-browser and cross-platform behavior, you must use the
<a>
tag, not the <button>
tag, and you also
must include a
tabindex
attribute.
<a
tabindex="0"
class="btn btn-lg btn-danger"
role="button"
trigger="focus"
mdbPopoverTitle="Dismissible popover"
mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>Dismissible popover</a
>
Disabled elements
Elements with the disabled
attribute aren’t interactive, meaning users cannot
hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to
trigger the popover from a wrapper <div>
or <span>
and
override the pointer-events
on the disabled element.
For disabled popover triggers, you may also prefer data-mdb-trigger="hover"
so
that the popover appears as immediate visual feedback to your users as they may not expect
to click on a disabled element.
<span class="d-inline-block" mdbPopover="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none" type="button" disabled>
Disabled button
</button>
</span>
Popovers - API
Import
Via JavaScript:
import { MdbPopoverModule } from 'mdb-angular-ui-kit';
…
@NgModule ({
...
imports: [MdbPopoverModule],
...
})
Inputs
Name | Type | Default | Description |
---|---|---|---|
animation |
Boolean | true |
Apply a fade transition to the popover |
mdbPopover |
String | '' |
Default content value if mdbPopover input isn't present. |
mdbPopoverTitle |
String | '' |
Default title value if mdbPopoverTitle input isn't present. |
delayShow |
Number | 0 |
Delay showing the popover (ms) |
delayHide |
Number | 0 |
Delay hiding the popover (ms) |
placement |
String | 'top' |
How to position the popover - top | bottom | left | right |
trigger |
String | 'click' |
How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger. |
offset |
Number | 0 |
Offset of the popover relative to its target |
Outputs
Name | Description |
---|---|
popoverShow |
Fires when show animation starts. |
popoverShown |
Fires when show animation ends. |
popoverHide |
Fires when hide animation starts. |
popoverHidden |
Fires when hide animation ends. |
Methods
Name | Description | Example |
---|---|---|
hide |
Manually closes a popover |
popover.hide()
|
show |
Manually opens a popover |
popover.show()
|
toggle
|
Manually toggle a popover |
popover.toggle()
|
<button
type="button"
class="btn btn-lg btn-danger"
mdbPopover="And here's some amazing content. It's very engaging. Right?"
mdbPopoverTitle="Popover title"
#popover="mdbPopover"
>
Click to toggle popover
</button>
@ViewChild('popover') popover: MdbPopoverDirective;
ngAfterViewInit(): void {
this.popover.show();
}